如何在父容器中使所有div可拖动

Question

有一个div带id parentDiv,并且block1在parentDivdivl中有一些div类

喜欢

<div id="btn"><input name="click" type="button" value="Click" class='button" /></div>

<div id="parentDiv">
    <div class="block1" style=" width:100px; height:100px; background:orange;">I am Block1</div>
    <div class="block1" style=" width:100px; height:100px; background:orange;">I am Block1</div>
</div>

在JQuery中,div与类一样block1,是可拖动的.

$(function(){
    $('.block1').draggable({
        drag: function() {
           $('.block1').text('Drag Now!');
        },
        stop: function() {
           $('.block1').text('Stop Now!');
        }
    });
});

这些div作为方面工作,但问题是,如果通过点击btn输入block1附加任何新的divparentDiv

$('#btn').on('click', 'input.button', function(){
    var $newDiv=$('<div class="block1" style=" width:100px; height:100px; background:green;">I am Block1</div>');
});

那是不可拖的.

是的,它不起作用,因为它不在DOM中.

我们可以click在#btndiv上为它的子节点定义一个事件input.button,如果我们在这个#btndiv中添加带有类按钮的新输入,那么所有这些都将作为方面工作.

所以我的问题是,有没有办法让所有div在父容器中可拖动parentDiv,就像我们可以用#btndiv 做的那样？

Answer 1

您可以在事件上使用jQuery on方法mouseover来绑定未初始化的可拖动子项:

$(".parentDiv").on("mouseover", ".block1", function() {

    // Use the UI pseudo-selector to check that
    // it is not already draggable
    if(!$(this).is(":ui-draggable"))
        $(this).draggable({
            /* Options */
        });
});

为方便起见,包含在扩展jQuery的函数中:

$.fn.extend({

    /**
     * Children of the element with the given selector
     * will automatically be made draggable
     * @param {String} selector
     *  The selector of the child / descendant elements
     *  to automatically be made draggable
     * @param {Object} opts
     *  The options that would normally be passed to the
     *  draggable method
     * @returns
     *  The jQuery array for chaining
     */
    draggableChildren: function(selector, opts) {

        // On using event delegation to automatically
        // handle new child events
        $(this).on("mouseover", selector, function() {

           // Check that draggable not already initialized
           if(!$(this).is(":ui-draggable"))

               // Initialize draggable
               $(this).draggable(opts);
        });

        // Return this for chaining
        return this;
    }
});

您可以按如下方式使用:

$(".parentDiv").draggableChildren(".block1", {
    drag: function() {
        $(this).text('Drag Now!');
    },
    stop: function() {
        $(this).text('Stop Now!');
    }
});

这是一个小提琴,显示它在行动

Answer 2

您需要使用 jquery 的“live”功能在未来的元素上添加事件和功能。

此代码借自另一篇文章（http://stackoverflow.com/questions/1805210/jquery-drag-and-drop-using-live-events）

(function ($) {
   $.fn.liveDraggable = function (opts) {
      this.live("mouseover", function() {
         if (!$(this).data("init")) {
            $(this).data("init", true).draggable(opts);
         }
      });
      return $();
   };
}(jQuery));

现在不要这样称呼它：

$(selector).draggable({opts});

...只需使用：

$(selector).liveDraggable({opts})