jquery-ui-draggable

Keep a jQuery dialog in a div

由 此生再无相见时 提交于 2019-12-20 01:12:02
问题 I am trying to create a number of jQuery dialogs but I would like to constrain their positions to inside a parent div. I am using the following code to create them (on a side note the oppacity option is not working either...): var d= $('<div title="Title goes here"></div>').dialog({ autoOpen: true, closeOnEscape: false, draggable: true, resizable: false, width: dx, height: dy }); d.draggable('option', 'containment', 'parent'); d.draggable('option', 'opacity', 0.45); $('#controlContent')

multiple droppable

由 China☆狼群 提交于 2019-12-19 09:39:09
问题 I've have multiple droppable divs (which all have the same size) and one draggable div. The draggable div is 3 times bigger than one droppable. When I drag the draggable div on the droppables divs I want to find which droppable has been affected. My code looks like this: $(function () { $(".draggable").draggable({ drag: function (event, ui) { } }); $(".droppable").droppable({ drop: function (event, ui) { alert(this.id); } }); }); the html <div style="height:100px; width:200px; border-bottom

multiple droppable

由 帅比萌擦擦* 提交于 2019-12-19 09:39:05
问题 I've have multiple droppable divs (which all have the same size) and one draggable div. The draggable div is 3 times bigger than one droppable. When I drag the draggable div on the droppables divs I want to find which droppable has been affected. My code looks like this: $(function () { $(".draggable").draggable({ drag: function (event, ui) { } }); $(".droppable").droppable({ drop: function (event, ui) { alert(this.id); } }); }); the html <div style="height:100px; width:200px; border-bottom

jQuery draggable, event when dropped outside of parent div

由 喜夏-厌秋 提交于 2019-12-19 06:44:40
问题 I have a list of photos, and I have draggable added to them, however when the photo is dragged outside of the parent div, I want to change it's class so it indicates that if you drop it, it will be removed, and then when the user drops it, I want it to fire a function. (only if it is outside of the parent div) <ul class="photos"> <li><img src=""/></li> <li><img src=""/></li> </ul> so when an li is dragged outside of .photos, it fires to add class, and then if it's dropped outside of it, then

Draggable and resizable in JqueryUI for an image is not working?

由 百般思念 提交于 2019-12-18 17:57:09
问题 I used below code for dragging and resizing the image, <!DOCTYPE html> <html> <head lang="en"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/> <script type="text/javascript"> $(document).ready

How do I highlight a droppable area on hover using jquery ui draggable

由 白昼怎懂夜的黑 提交于 2019-12-18 12:06:06
问题 I actually have two questions, the on in the title being the main one. I have multiple div elements on the page marked as droppable. Inside these div elements I have spans that are marked as draggable. I want it so when you are dragging an element and it is hovered over a droppable area that area either highlights or has a border so they know they can drop it there. As secondary question, all my draggable elements have a display:block, a width and a float on them, so they look nice and neat

How to automate angular-drag-and-drop-lists

由 落花浮王杯 提交于 2019-12-18 09:42:31
问题 Problem : trying to simulate drag drop in frontend that uses angular-drag-and-drop-lists (go to detailed description) Tried : 1.jquery-simulate: Gives following error Uncaught TypeError: Failed to execute 'dispatchEvent' on 'EventTarget': parameter 1 is not of type 'Event'. 2.drag-drop-helper.js : click happens on item to be dragged 3.drag_to : nothing happens Need some more suggestions . Thanks jquery-simulate: https://github.com/jquery/jquery-simulate sorry not able to post link for drag_to

jQuery UI drop event of droppable fires on sortable

由 五迷三道 提交于 2019-12-18 07:08:24
问题 I have a list of elements that can be dropped into a list of (existing) sortables. When a droppable element is dropped into the sortables, I want to modify the element. I do this by calling the drop event of droppable. But it seems this drop event is also fired when the sortable elements are sorted inside sortable. And I only want to modify the dropped element when dropped-in from the outside. $('#sortable').sortable().droppable({ // Drop should only fire when a draggable element is dropped

jQuery - draggable div with zoom

由 Deadly 提交于 2019-12-18 05:45:28
问题 This is my code: http://jsfiddle.net/652nk/ HTML <div id="canvas"> <div id="dragme"></div> </div> CSS #canvas { width:500px; height:250px; border:1px solid #444; zoom:0.7; } #dragme { width:100px; height:50px; background:#f30; } JS $(function(){ $('#dragme').draggable({containment:'parent'}) }) I have a major issue when using css zoom property. Position of target draggable div is not coordinated with cursor position. Is there any clean and simple solution? I should be able to change zoom

How to make header panels sortable

由 ﹥＞﹥吖頭↗ 提交于 2019-12-17 22:01:21
问题 Report designer contains Bootstrap 3 panels. Panels contain divs. I tried to make Group 1 and 2 header panels (having class panel-sortable ) sortable using $(".panel-sortable").sortable().disableSelection(); Panel order cannot changed. After dragging Group 2 header to Group 1 header to change their order panel old order is restored. How to make header1 and 2 panels sortable so that their order can changed ? Report can contains many headers. If there is some other way to make them sortable,
订阅 jquery-ui-draggable