jquery-ui-draggable

I am looking for an example of drag and drop where the drag item has two distinct areas that have to match up with two droppable areas. Example: I would like the blue drag item to revert unless it is dropped in a position where each of its red children land on a green area. Ideally I would like to use jquery ui (as I have experience with it), but any javascript library would be fine, thanks in advance. You can accomplish this by using a combination of draggable / droppable options. Given HTML like this: <div id="blue" class="valid"> <div id="red-one" class="red"></div> <div id="red-two" class=

Problem I have 4 images. User can drag and drop them to another list and change the order of the images. Target is that the users selects the order of the images. The problem is that I am unable to swap these images when they are place on each other. HTML <ul id="choices"> <li><img src="http://placehold.it/200x200&text=1" /></li> <li><img src="http://placehold.it/200x200&text=2" /></li> <li><img src="http://placehold.it/200x200&text=3" /></li> <li><img src="http://placehold.it/200x200&text=4" /></li> </ul> <ul id="answers"> <li></li> <li></li> <li></li> <li></li> </ul> jQuery (function ($) { $

I'm working on a mobile application where I'm trying to combine jQuery UI's draggable functionality with jQuery Mobile's taphold event. The idea is that an element becomes draggable when a taphold is executed. Draggable is being initialized on elements in the following code: $('div.rect', '#outerBox').draggable({ containment: "parent", grid: [50, 50], disabled: true, stop: function(event, ui) { $(this).draggable('disable'); $(this).removeClass('highlighted'); } }); As you can see the draggable functionality is disabled initially, because I want to enable it after a taphold event. To achieve

I would like to have two lists, Available Items and Selected Items, whereby Available Items are assigned to Selected Items via drag and drop. I require the Selected Items to be sortable, but not the Available Items. The challenge is that both lists can potentially contain a significant number of items, and therefore need to be scrollable. Here is the jQuery I have thus far: <script type="text/javascript"> $(function() { $( "#available > li" ).draggable({ revert: 'invalid', connectToSortable: '#selected', containment: '#drag_container' }); $( "#selected" ).sortable({ axis: 'y', placeholder: 'ui

I'm trying to catch the dragend event in Javascript for a draggable DIV. The dragend event is not fired at all, why ? and how to solve this ? PS, I'm ussing .draggable() method from: jQuery UI 1.9.2 Here's my code: http://jsfiddle.net/vBMav/ HTML: <div id="divId"> ... </div> CSS: #divId { background-color: #000000; color: #ffffff; height: 200px; width: 200px; } Javascript: $('#divId').draggable(); $('#divId') .bind('dragstart', function(){ $("#divId").text("drag start"); }) .bind('drag', function(){ $("#divId").text("dragging"); }) .bind('dragend', function(){ $("#divId").text("drag ended"); }

I have the following HTML: <div class="list" id="list"> <div class="item" id="i1">Item 1</div> <div class="item" id="i2">Item 2</div> <div class="item" id="i3">Item 3</div> </div> <div class="timeline" id="timeline"> </div> What I want to be able to do, with jQuery, is: Be able to drag .item s from the #list into the #timeline .item s can be dropped into the timeline as many times as required, eg. there could be 4 of item #i1 in the timeline. .item s in the timeline must not overlap each other .item s can be positioned at any place along the timeline so long as they do not overlap any other

I've created a "2d slider" in jQuery in which 2 parameters are manipulated simultaneously by dragging a "handle" within a bounding box. I've implemented this by nesting a "handle" div within a parent div, and using the jQuery UI plugin to facilitate the dragging behaviour. The html looks like: <div class="Slider2d" id="grid_spacing_both"> <div class="Slider2dHandle" id="grid_spacing_both_handle"></div> </div> The jQuery looks like: $(".Slider2dHandle").draggable({ containment: "parent", scroll: false, drag: function(event, ui) { // calculates position and updates value input boxes } }); I've

I'm trying to combine a draggable panel (on top), and a sortable panel (bottom). Dragging works fine, but sorting fails. Here is my JS fiddle: http://jsfiddle.net/dmUKY/9/ Both drag'n drop and sortable functions shares the droppable:drop function. When sorting elements, the function has to replace the selected object. drop: function (event, ui) { //alert($(this).parent().html()); //alert($(ui.helper).attr('class')); var obj; if ($(ui.helper).hasClass('draggable')) { //alert('draggable'); obj = $(ui.helper).clone(); obj.removeClass('draggable').addClass('editable') //obj.addClass('droppable');