javascript - jQuery:将图像拖放到具有相同类的 div 内？

Question

我正在尝试在我的 Web 应用程序中使用 jquery 拖放，并将图像拖放到具有相同类的不同 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();

                }



            });


});