如何在父容器中与所有Div拖动

Question

有一个带有ID parentDiv的div，并且在parentDiv中有一些div CC_4divl

喜欢

<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的新DIV附加在parentDiv中

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

不可拖动。

是的，它将不起作用，因为它不在dom中。

我们能够将click DIV上的CC_8事件定义到其子女input.button，如果我们在此#btn DIV中使用类按钮添加新输入，则所有这些都将作为方面工作。

所以我的问题是，是否有一种方法可以使所有Div在父容器parentDiv中使用，就像我们可以使用#btn Div一样？

Answer 1

您可以使用 mouseover事件的方法上使用jQuery来绑定非专业化的可拖动儿童：

$(".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!');
    }
});

这是一个小提琴，在Action中显示它

Answer 2

您需要使用jQuery的"实时"函数在未来元素上添加事件和函数。

此代码是从另一个帖子（http://stackoverflow.com/questions/1805210/jquery-drag-and-drop-using-live-vents）借用的

(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})

Answer 3

您需要将containment属性设置为父母限制该区域。

$("#yourItem" ).draggable({ containment: "parent" });

要启用可拖动的新动态项目，您可以做的就是移动将draggablity功能绑定到方法的代码，并在将新项目添加到DOM

之后调用该方法

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

现在准备就在文档上，添加新内容

后不久

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

}）;

Answer 4

$('#maindiv div").draggable({container:"#maindiv",scroll:false}) 

现在您可以做任何想要的