JQuery UI Droppables падает в неправильном месте

Question

Я пытаюсь создать приложение jquery, где пользователь может перетащить изображение с панели инструментов на «холст», чтобы создать свою собственную картинку. Оригинальный элемент остается на панели инструментов (в случае, если он снова нужен), и помощник / клон должен быть сброшен на холст в том месте, где его оставил пользователь.

Проблема в том, что сбрасываемые предметы "прыгают" после завершения перетаскивания ... предметы не падают в правильные места.

Любая помощь приветствуется ...

"maincanvas" - это имя div, которое я использую в качестве холста. Маленькие изображения внутри панели инструментов имеют класс «большой палец».

$(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);
                }
            }
        });
});

Буду признателен, если скажу мне, что я делаю неправильно, или лучше это сделать. Спасибо!

Answer 1

Я поместил пример в jsfiddle, чтобы вы могли попробовать: http://jsfiddle.net/hHKh9/

Это довольно просто, элемент в списке 1 можно перетащить в список 2, но он использовал свойство placeholder для определенияcss class, который применяется к области, в которую вы попадете.