jquery-ui-droppable

We are currently trying to accomplish cross-frame dragging between draggables and sortables provided by jQuery UI. This is working properly now. However, the mouse offset seems off when dragging from the parent to the child frame--please see this fiddle: http://jsfiddle.net/r5nfe/6/ . Code in the parent: $('#my-frame').load(function () { $('.draggable').draggable({ appendTo: 'body', helper: 'clone', iframeFix: true, revert: 'invalid', connectToSortable: $('#my-frame').contents().find('.sortable'), cursorAt: { top: 0, left: 0 } }); $('#my-frame').contents().find('.sortable').sortable({

I have a div element that I want to be able to drag onto a scaled element. However when I do this, the div element doesn't go to the right coordinates of the element but it does when I drag it around for the second time. I also think it scales up when the element get's added, which I want to try and avoid. Can anyone help me fix this? (especially the whole no going to the right spot thing) I've tried things like this to get the actual coordinates of the div but I'm not sure how to translate that over to the draggable element since mousemove doesn't work when I'm dragging something. $("body")

I was asked to create a grid of squares, where each square may or may not contain a link and these links should be able to be moved about the grid. I figured that draggable/droppable would be the way to go and it works fine, however, now we want to be able to have the draggables swap about if one is dropped on top of another. So it looks now like sortable would have been the way to go. However, sortable looks more like it's meant for lists whereas I haven't written it like a list. Is there an easy way to make what I have so far work, or do I need to totally rewrite this using sortable? I'm new

I have jquery draggable/droppable working with the containment and helper options set. What I'd like to do is to store the top and left parameters of the dropped item in two variables. I have achieved this in the following example (drag the new document icon into the box) however the position reported back is the position relative to the original icon instead of the parent DIV. Both the icon and the droppable box are absolute positioned. http://www.instructuk.com/drop.php Does anyone know how to get the position relevant to the parent instead of the icon? You'll have to do the calculation

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 using jquery UI and jQuery draggable , all my draggables use jquery clone helper and appends the draggable to droppable . Here is my code $('#squeezePage #droppable').droppable({ tolerance: 'fit', accept: '#squeezeWidgets .squeezeWidget', drop: function(event, ui) { var dropElem = ui.draggable.html(); var clone = $(dropElem).clone(); clone.css('position', 'absolute'); clone.css('top', ui.absolutePosition.top); clone.css('left', ui.absolutePosition.left); $(this).append(clone); $(this).find('.top').remove(); $(this).find('.widgetContent').slideDown('fast'); $(this).find('.widgetContent')

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:1px solid red; " id="Div0" class="droppable"> drop in me1! </div> <div style="height:100px; width:200px;