jquery-ui-droppable | 易学教程

jQuery Sortable and Droppable

阅读更多关于 jQuery Sortable and Droppable

I want to have a list that is sortable, but I also want the elements in that list to be droppable to the divs I have defined as droppable. I can't seem to find a way to do it. Any ideas? Here's a simplified version of Colin's solution. The biggest difference is that this solution does not store the entire html of the sortable elements, but only the currently dragged item. It is then inserted into it's original position if the item is dropped on the droppable area. Anyway, here's the code: <!doctype html> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs

dragging items based on percentage to containment element

阅读更多关于 dragging items based on percentage to containment element

问题 Here is what it looks like; $( "#box ul li" ).draggable({ helper: "clone" }); $( ".item" ).draggable({containment: ".door"}); $( ".door" ).droppable({ accept: ":not(.ui-sortable-helper, .item)", drop: function( event, ui ) { $( "<div class='item'></div>" ).html(ui.draggable.find("img")).appendTo(this); } }); User drags the $( "#box ul li" ) element and drops it on $(".door") element. And it appends it to $(".door") element with $(".item") selector. I am using jquery UI - Draggable to drag and

jQuery Droppable, get the element dropped

阅读更多关于 jQuery Droppable, get the element dropped

问题 A small question hopefully with a simple answer, I am using jQuery draggable and droppable to place items into a dock. Using the below code for the drop. $("#dock").droppable({ drop: function(event, ui) { //Do something to the element dropped?!? } }); However I couldn't find a way to get what element was actually dropped, so I can do something do it. Is this possible? 回答1: From the drop event documentation: This event is triggered when an accepted draggable is dropped 'over' (within the

jQuery UI Droppable and Sortable - dropping in the correct sort location

阅读更多关于 jQuery UI Droppable and Sortable - dropping in the correct sort location

问题 I'm working on a project where I'm dragging elements from a 3rd party jQuery control to a jQuery sortable, using a combination of droppable and sortable. This works perfectly fine, except the item being added is always added to the bottom of the sortable list, and you must then move it to the correct location as a separate step. Is it possible to have the item added to the location where you dropped it in the list? You can see this behavior in the jQuery shopping card droppable demo from here

how to revert position of a jquery UI draggable based on condition

阅读更多关于 how to revert position of a jquery UI draggable based on condition

问题 I have an element which is draggable and an element which is droppable. Once the dragged item is dropped on the dropzone I am trying to execute the following jquery psuedo code: if(draggedelement == value){ $(draggedelement).hide(); } else{ $(draggedelement).revert(); } where the revert() function moves the dragged item back to its original postion. How would one accomplish this? P.S. I am aware of the draggable 'revert' option, however this only activates if the dragged item does not make it

grouping draggable objects with jquery-ui draggable

阅读更多关于 grouping draggable objects with jquery-ui draggable

I want to use jquery draggable/droppable to let the user select a group of objects (each one has a checkbox in the corner) and then drag all the selected objects as a group... I can't figure out for the life of me how to do it haha. Here is what I'm thinking will lead to a usable solution, on each draggable object, use the start() event and somehow grab all the other selected objects and add them to the selection I was also considering just making the dragged object look like a group of objects (they're images, so a pile of photos maybe) for performance reasons. I think using the draggable

When I make a draggable clone and drop it in a droppable I cannot drag it again

阅读更多关于 When I make a draggable clone and drop it in a droppable I cannot drag it again

When I make a draggable clone and drop it in a droppable I cannot drag it again. How do I do that? Secondly I can only figure out how to us .append to add the clone to the droppable. But then it snaps to the top-left corner after any existing element and not the drop position. $(document).ready(function() { $("#container").droppable({ drop: function(event, ui) { $(this).append($(ui.draggable).clone()); } }); $(".product").draggable({ helper: 'clone' }); }); </script> <div id="container"> </div> <div id="products"> <img id="productid_1" src="images/pic1.jpg" class="product" alt="" title="" />

Drag and drop multiple selected draggables and revert invalid ones using Jquery UI

阅读更多关于 Drag and drop multiple selected draggables and revert invalid ones using Jquery UI

问题 Drawing a box with cursor (lasso) will select multiple .item in this JSFiddle example. Selected .item 's become draggable. Empty .slot without an .item inside is a valid droppable. When you drop multiple draggables on multiple droppables, only the .item which mouse is on will revert if its corresponding droppable not valid. How to make every draggable revert if it's dropped on invalid droppable? Javascript: $(function () { // we are going to store the selected objects in here var selected = $

How to get jQueryUI drag\drop working with touch devices

阅读更多关于 How to get jQueryUI drag\drop working with touch devices

问题 This is one situation where I hope someone replies to tell me I'm an idiot. But I continue to be amazed that jQueryUI drag\drop doesn't work with touch devices. I have not tested them all but I have tried iphone\ipad\android 2, 3&4 over the last year and nothing. Just tried the latest version on a new Android. Still nothing. Don't believe me, just visit the demo page on a mobile device and try to use the drag\drop examples. Nothing. Is there a technical problem or core incompatibility in play

jQuery drag and drop simulation does not work for the last draggable

阅读更多关于 jQuery drag and drop simulation does not work for the last draggable

I am trying to simulate the drag and drop simulation using jquery-simulate-ext plugin of jquery-ui . Before I give the details of the scenario , let me show you the js fiddle here . I have 3 columns of divs . In 1st column, I have 3 draggables with country names, in 2nd column 3 droppables of blank divs and in 3rd column 3 normal div s with city names . So after all the draggables from 1st column are dropped on 2nd cloumn , 2nd and 3rd column rows will make a sense of country-city relationship. But the problem is after the simulation is done, 1st and 2nd draggables are dropped on expected