jquery-ui-droppable

问题 I have a droppable element with a dropover event handler. Dragging an element over the droppable expands a node. However, I want to add a delay so the node does not expand immediately, i.e. you have to hold the draggable over the droppable for a second before it expands. droppable.over = function(event, ui) { // expand node if dragover lasts 1000 milliseconds node.expand(); }; My first thought was to simply use setTimeout on node.expand() , but this doesn't do what I want, it simply delays

问题 Basically what I have is a set of doodads , and what I need to do is to be able to drag any item in that set into a containment box. Once they are in the box, they can still be moved around and manipulated freely, but they can't be taken out of the box again though they can be deleted. The doodads are also set to clone as a user can have more than one of the item in the box if they so desire. So the two parts are, set up the doodad list (already done), and then make it draggable so that it

问题 Variations of this question have been asked, but the answers are all different, somewhat dated, and aren't working for me so I'm hoping it's a matter of changed syntax rules in jQuery that I'm missing. The scenario HTML: <div id="theDroppable">Droppable</div> <div id="theDraggable">Draggable</div> <div id="theTrigger">Click to trigger a drop</div> The jQuery: $( "#theDroppable" ) .droppable({ drop: function( event, ui ) { alert('dropped'); } }); $( "#theDraggable" ).draggable({}); $( "

问题 I have a html page with some images that are dragggable and a set of divs that are droppable. It all works fine using the below code but I can't figure out how i can REMOVE AN ITEM from the droppable area after its been dropped. (lets say the user changes their mind . .) I want some behavior that if you drag an item out of the droppable area that it gets removed from the droppable area. I expected this to be the behavior out of the box but apparently not. $(".draggable").draggable({ cursor:

问题 I've created a drag and drop game in order to start teaching myself jquery. Everything seems to be working but you can drop more than one item onto the same square. I want to disable droppable if the place holder has an image in it. I've looked into: `greedy: true` That disables the drop but I'm not sure how to enable it again and also: $(this).droppable( 'disable' ); I can get these both to disable the drop but not sure how I get them to enable it again if the block/image reverts back to its

问题 I'm sure this has been answered before but I can't find an example to fit my situation. I've got a list of images that are draggable. I've also got a div (id="dropZone") that is set to droppable and sortable. I'd like to fire a function when the images get dragged and dropped on the div, but not when things are dropped on the div from being sorted. Here's what I tried: stop: function() { $('#dropZone').prepend('<img src"img.png" />'); } This I added to the droppable images, however this will

问题 I'm implementing drag and drop using the jQuery UI Draggable and Droppable widgets. (Sortable didn't provide quite enough flexibility for me.) As I drag, I'm dynamically creating a drop placeholder element to show precisely where a drop would be placed. But how can I make this drop placeholder droppable itself? If I create it and then immediately call the droppable() method on it, this has no effect. And so if they user drops directly over a drop placeholder, how could I detect this? You can

问题 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

问题 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

问题 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