jquery-droppable | 易学教程

Creating multiple droppable siblings that at positioned on top of eachother

阅读更多关于 Creating multiple droppable siblings that at positioned on top of eachother

问题 I am trying to create multiple jquery droppables next to eachother where some parts might overlap, in these cases I want the one that is on top (z-index wise) to be greedy. I have tried setting the greedy: true option in the droppable, but this does not seem to help. I have also tried to return false on the drop event and used event.stopPropagation(); . Here is a jsfiddle based on the demo page of jquery. Is there any way to stop the drop event from propagating if there is another droppable

jquery draggable containment array values for scaled container

阅读更多关于 jquery draggable containment array values for scaled container

问题 If anyone could help me figure out how to make the draggable elements contained in a div that changes scale based on window size, i'd really appreciate any guidance. If I do: element.draggable({ cursor: "move", containment: '#container' }); What will happen is it gives me the containment for the regular size of the container. So if I have a transform: scale(1.5) , there will be space in the container that the draggable element can not go. I've also tried containment: 'parent' but that get's

drag and drop - the elements don't drop

阅读更多关于 drag and drop - the elements don't drop

问题 i'm making a drag and drop quiz here's the full code <!doctype html> <html> <head> <title>A jQuery Drag-and-Drop quiz</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> <script type="text/javascript"> var correctCards = 0; $( init ); function init() { //

Drop() gets called twice with Sortable/Droppable

阅读更多关于 Drop() gets called twice with Sortable/Droppable

问题 I have this code right here. I have two problems though: In the receive function, how can we get the element that just got dropped into the sortable? Not the one that was used to drop a new one, but the actual one that got dropped into the list? Since I couldn't find that, I decided to use the drop() function, but now, why is that function getting called twice?! I don't want that! $( "#sortable" ).droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", drop: function( event

Clone draggable after dropping in targeted area with jQuery UI

阅读更多关于 Clone draggable after dropping in targeted area with jQuery UI

问题 I want some images to drop in a targeted area as many times as possible. But the image drops for only one time. My jQuery UI code: $(function() { $( ".draggable img").draggable({ revert: "invalid", appendTo: "#droppable", helper: "clone" }); $( "#droppable" ).droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", drop: function( event, ui ) { $( this ).find( ".placeholder" ).remove(); var image = $(".ui-draggable"); $( "<img />" ).image.src.appendTo( this ); } }); });

Remove cloned image after adding another image with jQuery UI

阅读更多关于 Remove cloned image after adding another image with jQuery UI

问题 I have a nice solution from my previous question that successfully clones images after being dropped. Here is the code: $(function() { var makeDraggable = function(element) { element.draggable({ revert: "invalid", appendTo: "#droppable", helper: "clone" }); } $( "#droppable" ).droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", drop: function(event, ui) { var newClone = $(ui.helper).clone(); makeDraggable(newClone); $(this).after(newClone); } }); // Initalise the

JQuery UI: Cancel Sortable upon Droppable Drop

阅读更多关于 JQuery UI: Cancel Sortable upon Droppable Drop

问题 I am using JQuery 1.5.1 and JQuery UI 1.8.11. I have added sortable for a number of items - the task here is to allow drag to sort, this all works fine. But I also want to incorporate droppable, so that the item can be dropped onto a "copy me" area - the task there will be to duplicate the item (I will work that bit out later) Problem is the droppable target is at the bottom of the sortable list (I do not want to move this) and once the drop occurs the sortable item moves to the bottom of the

Clone draggable after dropping in targeted area with jQuery UI

阅读更多关于 Clone draggable after dropping in targeted area with jQuery UI

I want some images to drop in a targeted area as many times as possible. But the image drops for only one time. My jQuery UI code: $(function() { $( ".draggable img").draggable({ revert: "invalid", appendTo: "#droppable", helper: "clone" }); $( "#droppable" ).droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", drop: function( event, ui ) { $( this ).find( ".placeholder" ).remove(); var image = $(".ui-draggable"); $( "<img />" ).image.src.appendTo( this ); } }); }); Please see the demonstration here: jsFiddle example From the example you see that the image drops in the

JQuery UI: Cancel Sortable upon Droppable Drop

阅读更多关于 JQuery UI: Cancel Sortable upon Droppable Drop

I am using JQuery 1.5.1 and JQuery UI 1.8.11. I have added sortable for a number of items - the task here is to allow drag to sort, this all works fine. But I also want to incorporate droppable, so that the item can be dropped onto a "copy me" area - the task there will be to duplicate the item (I will work that bit out later) Problem is the droppable target is at the bottom of the sortable list (I do not want to move this) and once the drop occurs the sortable item moves to the bottom of the list. What I want to do is cancel this sort when the drop event fires. You can see my problem in

Creating multiple droppable siblings that at positioned on top of eachother

阅读更多关于 Creating multiple droppable siblings that at positioned on top of eachother

I am trying to create multiple jquery droppables next to eachother where some parts might overlap, in these cases I want the one that is on top (z-index wise) to be greedy. I have tried setting the greedy: true option in the droppable, but this does not seem to help. I have also tried to return false on the drop event and used event.stopPropagation(); . Here is a jsfiddle based on the demo page of jquery. Is there any way to stop the drop event from propagating if there is another droppable triggering it, preferably the one that has the highest z-index? Use document.elementFromPoint to check