Question

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

但是当我将图像拖放到其中一个Div上时，它会将相同的图像复制到具有相同类别的其他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]({

但我不认为我正确接近它，因为它们会阻止我的整个代码运行。

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

编辑：

我已将此$(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：在同一个类的div中拖放图像？

1 个答案: