jQuery：drag/drop 图像在 div 中与 class 相同？

Question

我正在尝试在我的 Web 应用程序中使用 jquery 拖放功能，并在不同的 div 中使用相同的 [=46= 拖放图像].

但是当我将图像拖放到其中一个 Div 上时，它会将相同的图像复制到其他具有相同 class 的 div 中!

我创建了一个 jsfiddle 来演示这个问题：

这是我的全部代码：

$(document).ready(function () {

    var x = null;

    //Make element draggable
    $(".drag").draggable({

        helper: 'clone',
        cursor: 'move',
        tolerance: 'fit',
        stack: '.drag',
        revert: "invalid"


    });

            $(".droppable").droppable({



                    drop: function (e, ui) {

                    if ($(ui.draggable)[0].id != "") {
                        x = ui.helper.clone();
                        ui.helper.remove();




                    x.draggable({

                        //helper: 'original',
                        containment: '.droppable',
                        tolerance: 'fit',
                        stack: '.drag'



                    });

                    x.resizable({

                      animate: true,
                      //aspectRatio: 16 / 9,

                      helper: "ui-resizable-helper",
                      handles: "n, e, s, w, nw, ne, sw,se"

                    });
                    x.appendTo('.droppable');
                    $("#tools").show();
                    $("#logo").hide();
                    $("#thumbs").show();

                }

                }

            });


});

我也试过用这样的东西：

$(".droppable").this.droppable({

或者这个：

$(".droppable").droppable[0]({

但我认为我没有正确处理它，因为它们会阻止我的整个代码运行。

任何 advise/help 将不胜感激。

编辑：

我已将此添加：$(ui.draggable).appendTo( this ); 到我的代码中，但这将删除阻止图像在被删除后可拖动的功能！

Answer 1

试试这样的东西，希望它是您正在寻找的更多东西

$(document).ready(function () {

    var x = null;

    //Make element draggable
    $(".drag").draggable({

        helper: 'clone',
        cursor: 'move',
        tolerance: 'fit',
        stack: '.drag',
        revert: "invalid"


    });

            $(".droppable").droppable({

                    drop: function (e, ui) {
                        x = ui.helper.clone().css({position: 'absolute', left: 0, top: 0});
                        ui.helper.remove();

                        x.draggable({

                        //helper: 'original',
                        containment: $(this).closest('droppable'),
                        tolerance: 'fit',
                        stack: '.drag'



                    });

                    x.resizable({

                      animate: true,
                      //aspectRatio: 16 / 9,

                      helper: "ui-resizable-helper",
                      handles: "n, e, s, w, nw, ne, sw,se"

                    });
                    x.appendTo($(this));
                    $("#tools").show();
                    $("#logo").hide();
                    $("#thumbs").show();

                }



            });


});

jQuery：drag/drop 图像在 div 中与 class 相同？

jQuery: drag/drop images inside div's with same class?

javascript

jquery

drag-and-drop