Question

我正在尝试使用jQuery ui做一些事情on drop。

然而，无论我做什么，on drop根本不会开火。

我用来使div可拖动和可丢弃的代码是这样的：

$(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');

                }

                }
            });


});

在drop上做某事的代码是：

                    $(".drag").on("drop", function(e, ui) {


                    //alert('selected');
                    var srcc=$(this).find('img').attr('src');
                    $('#droppable #thumbs #drag_trans img').attr('src',srcc);



});

我可以将on drop功能更改为普通click或mouseover events，但代码工作正常，但当我使用on drop时，它无法正常工作。< / p>

有人可以告诉我为什么没有开火吗？

Answer 1

无需添加额外的on drop功能。检查此Fiddle。您可以在drop: function (e, ui) {...}代码段中进行更改。使用以下JS代码：

$(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).attr('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');

                }

                }
            });


});

关于drop的jQuery没有解雇？

1 个答案: