jQuery：在具有相同类的 div 中拖放图像？

Question

我正在尝试在我的 Web 应用程序中使用 jquery 拖放功能，并将图像拖放到具有相同 Class 的不同 div 中。

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

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

http://jsfiddle.net/7nwhs3my/

这是我的全部代码：

$(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]({

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

任何建议/帮助将不胜感激。

编辑：

我已经在我的代码中添加了这个：$(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();

                }



            });


});