Question

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

问题是拖动完成后，droppables似乎“跳了”......物品没有掉在正确的位置。

感谢任何帮助...

“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，然后将其应用到您将放入的区域。

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

1 个答案: