jquery-ui-draggable

问题 Is this possible: Create a draggable element so that when it is dragged over a specific droppable element, the draggable element's containment option is set to the droppable element? This would create an effect where dragging something over a droppable element causes the draggable element to get locked/stuck to the confines of the droppable element. Below is an excerpt from my code, although it fails to accomplish the above effect. var droppable_position = $('#droppable').position(); $('

问题 I'm using jquery drag and drop. The draggable element is a div with two nested divs floated left and right. On drop, the left nested div (which contains the text), gets enabled for a click event: $('.element_left').click(function(e) { window.open(ui.draggable.attr('data-link')); }); Now on drop, sporadically, the click event fires off opening the link in the data-link for the draggable. It looks like it fires off when the draggable number doesn't match the slot number, but not 100% on this.

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

问题 How to prevent draggable child elements from dragging over each other in absolute position? Something like: if( ($("#firstChild").position().left) >= ($("#secondChild").position().left) ) { $(this).draggable({ disabled: true }); } but this only disables dragabble when stop dragging, the goal is to prevent from overdragging in some way...Or with Droppable??? Any ideas for CASE 2? EDIT: Also, this is maximum for child1 towards child2 , so no overlap occurs , but child1 can push child2 on right,

问题 I work with this example from jQuery UI Sortable I have a problem with drag and drop. Table number 3 - sortable3 should only be able to receive one item. This is my HTML <div class="demo"> <ul id="sortable1" class='droptrue'> <li class="ui-state-default">Can be dropped..</li> <li class="ui-state-default">..on an empty list</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li> </ul> <ul id="sortable2" class='dropfalse'>

问题 I've implemented drag and drop using the jQuery UI draggable widget. I'm now implementing auto scroll during drag operations. I set it up so that when you start to drag, gray overlays appear at the top and bottom of the browser window. When you drag into one of these overlays, the browser window starts to auto scroll. You can see my test page at http://www.softcircuits.com/Client/scrolltest.html. Drag an item by dragging one of the crosshair icons on the left side. But there's a problem: if

问题 Here is my code from http://jsfiddle.net/XUFUQ/1/ $(document).ready(function() { addElements(); } ); function addElements() { $("#list1").empty().append( "<li id='item1' class='list1Items'>Item 1</li>"+ "<li id='item2' class='list1Items'>Item 2</li>"+ "<li id='item3' class='list1Items'>Item 3</li>" ); } $(function() { // there's the gallery and the trash var $gallery = $( "#list1" ), $trash = $( "#list2" ); // let the gallery items be draggable $( "li", $gallery ).draggable({ cancel: "button"

问题 Lets say there is a draggable object capable of being dragged only on one axis. Is there a way to programmatically move it? Either to start, or by a delta. Of course I could go and change its css left property, but that wouldn't trigger the dragging events jQuery offers. I was expecting to find a dragBy(x,y) method to the draggable. Here is the example: http://jsfiddle.net/odyodyodys/daHU8/ html: <div id="theButton">Reset position</div> <div id="theDiv">Lorem ipsum dolor sit amet</div> Js: $(

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

问题 Aim to snap elements together or reject snapping depending on positions to change the element appearance depending on snap position Sources already consulted Jquery UI – draggable 'snap' event Retrieving the "snapped to" element using jQuery UI draggable with snap enabled jQuery UI draggable options snaptolerance Visualisation Imagine a div with a connector - if I connect it to the left bottle, I need the connector to point right, if to the right bottle, the connector needs to point left.