JQuery UI Droppables被丢弃在错误的地方

Question

我正在尝试构建一个 jquery 应用程序，用户可以在其中将图像从工具栏拖到“画布”上以创建自己的图片。原始项目保留在工具栏中（以防再次需要），并且应将帮助程序/克隆拖放到用户离开它的位置的画布上。

问题是拖放完成后droppables似乎“跳跃”......项目没有放在正确的位置。

感谢任何帮助...

“maincanvas”是我用作画布的 div 的名称。 工具栏中的小图片都有“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);
                }
            }
        });
});

如果能告诉我我做错了什么或更好的方法来实现这一点，我将不胜感激。谢谢！

Answer 1

我在 jsfiddle 上放了一个示例供您尝试：http://jsfiddle.net/hHKh9/

相当简单，可以将列表一中的项目拖到列表二中，但它使用placeholder 属性来定义css class，然后将其应用于您将要放入的区域。