JQuery UI Droppables getting dropped in wrong place

Question

I am trying to build a jquery application where the user can drag an image from a toolbar onto a "canvas" to create their own picture. The original item remains behind in the toolbar (in case its needed again) and a helper/clone should get dropped onto the canvas in the place where the user left it off.

Problem is the droppables seem to "jump" after the dragging is completed... the items are not dropped in the right spots.

Any help is appreciated...

"maincanvas" is the name of the div I am using as my canvas. The little images inside the toolbar all have the class "thumb".

$(document).ready(function () {

$(".drag").draggable({
    helper: 'clone',
    scope: 'designer',
    containment: 'maincanvas',
    //When first dragged
            stop: function (ev, ui) {
                var pos = $(ui.helper).offset();
                objName = "#clonediv" + counter
                $(objName).css({
                    "left": pos.left,
                    "top": pos.top
                });
                $(objName).removeClass("drag");
                //When an existing object is dragged
                $(objName).draggable({
                    containment: 'parent',
                    stop: function (ev, ui) {
                        var pos = $(ui.helper).offset();
                    }
                });
            }
        });

$("#maincanvas").droppable({
    accept: '.drag',
    scope: 'designer',
    tolerance: 'intersect',
    drop: function (ev, ui) {
                if (ui.helper.attr('className').search(/drag/) != -1) {
                    counter++;
                    var element = $(ui.draggable).clone();
                    element.addClass("tempclass");
                    $(this).append(element);
                    $(".tempclass").attr("id", "clonediv" + counter);
                    $("#clonediv" + counter).removeClass("tempclass");
                    //Get the dynamically item id
                    draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
                    itemDragged = "dragged" + RegExp.$1
                    console.log(itemDragged)
                    $("#clonediv" + counter).addClass(itemDragged);
                }
            }
        });
});

Would appreciate either telling me what Im doing wrong or a better way to accomplish this. Thanks!

Luke Duddridge Luke Duddridge · Accepted Answer · 2011-07-29T13:03:36

I've put an example on jsfiddle for you to try: http://jsfiddle.net/hHKh9/

Is fairly simple, item in List one can be dragged into list 2, but it used the placeholder property to define a css class that is then applied the area you will drop into.

JQuery UI Droppables getting dropped in wrong place

1 Answers