jquery-ui-droppable

问题 Basically I have a list of draggable items and initially one droppable element for them to be dragged into. When an item is dragged into the droppable, the droppable is cloned (before the item is appended) and appended as a new droppable area. Take a look at this stripped down fiddle: http://jsfiddle.net/DKBU9/1/ (omitted sortable()) HTML <ul id="draggables"> <li>foo1</li> <li>foo2</li> <li>foo3</li> </ul> <ul class="droppable new"> </ul> JS $('#draggables > li').draggable({ appendTo:

问题 I want to remove the drag property of a <div> when I drop it on a container. But I get an error "Property 'draggable' of object #<Object> is not a function" , for my code below. $( "#fighter1" ).draggable(); //fighter1 is the id of draggable object $( "#fighter2" ).draggable(); $( "#fighter3" ).draggable(); $( "#fighter4" ).draggable(); $( "#fighter5" ).draggable(); $( "#fighter6" ).draggable(); $( "#dest" ).droppable({ //dest is the id of droppable object drop: function( event, ui ) { ui

问题 I have a sortable list in which are several elements that need to be able to be reordered by the user. Alternatively the elements can also be dragged onto 5 available dropzones ( droppable containers). The problem I am encountering is this: When the drop is successfully done on a droppable zone, the revert animation of the sortable is still playing animating the dropped element back into the sortable list. Instead I would like to animate it in a way that the helper is taken from where the

问题 I was asked to create a grid of squares, where each square may or may not contain a link and these links should be able to be moved about the grid. I figured that draggable/droppable would be the way to go and it works fine, however, now we want to be able to have the draggables swap about if one is dropped on top of another. So it looks now like sortable would have been the way to go. However, sortable looks more like it's meant for lists whereas I haven't written it like a list. Is there an

问题 I want to have several classes of draggables, each one corresponding to a class of droppables. But in addition, I want to have a separate "waste bin", where all the draggables can be dropped until a suitable droppable can be found for them. Now, this can be easily achieved with an accept function. However, I may have up to 20 classes, each one with 30-40 draggables/droppables. So if I use an "accept" function for this, the moment I pick up a draggable, my chrome freezes as it runs tests for

问题 I want to drag an element into TWO OR MORE droppable areas, but those droppable areas need to be wholly contained within my draggable object. The problem is, none of jQuery UI's existing functionality for droppable tolerances meets this need. Ideally I'd use "intersect", but where the the draggable and droppable object measurements are reversed in the code. (This logic can be found in jquery-ui.js by searching for $.ui.intersect .) I have tried overriding that function by duck punching with

问题 I have an arrangement of elements on a page: <div> <div class="dragdrop" style="top:0px; left: 0px; ">1</div> <div class="dragdrop" style="top:40px; left: 0px; ">2</div> <div class="dragdrop" style="top:60px; left: 0px; ">3</div> <div class="dragdrop" style="top:0px; left: 100px;">4</div> <div class="dragdrop" style="top:40px; left: 100px;">5</div> <div class="dragdrop" style="top:60px; left: 100px;">6</div> </div> How can I use jQuery UI (Draggable / Droppable) to make it so that if one div

问题 I have a droppable container with >1 draggables in it. I want to simply be able to see the position of each draggable every time any one of them is dragged. Sounds easy, but I'm having a tough time figuring it out. Here's what I have: <script type="text/javascript"> $(function() { $("#draggable").draggable({ containment: '#droppable' }); $("#draggable2").draggable({ containment: '#droppable' }); $("#droppable").droppable({ drop: function(event, ui) { document.getElementById('position1').value

问题 I am developing some simple drag-drop interactions with jQueryUI. Under some conditions, I would like the dragged item to go back to its original place (revert) and then shake. I placed the shake in the drop event of the droppable object, but it doesn't seem to wait for the revert to be finished. What's worse, sometimes it shakes before starting to revert to the original position, other times it shakes after the full revert has been done, and other times the shake gets caught up in the middle

问题 I am using JQuery-ui draggable & droppable. I want to add dropped elements to the drop-target container, while preserving the apparent position that it had when it was dropped. Using .html() lets me preserve the position data added by the .draggable() function, but because they become children of a new element, they snap to a new position relative to that element. I experimented with helper:clone, but found that it removed all positioning information. Here is my code, which adds dropped items