5

divwith idがあり、divlparentDivに class を持つ div がいくつかありますblock1parentDiv

お気に入り

<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 では、class を含む divblock1はドラッグ可能です。

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

これらのdivはアスペクトとして機能していますが、問題は、btn入力をクリックして新しいdivblock1が追加された場合ですparentDiv

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

それはドラッグできません。

はい、DOM にないため、機能しません。

clickdiv のイベント#btnをその childrenに定義できinput.buttonます。この div にクラス ボタンを使用して新しい入力を追加すると#btn、すべてがアスペクトとして機能します。

だから私の質問は、divでparentDivできるように、すべてのdivを親コンテナでドラッグ可能にする方法はあり#btnますか?

4

4 に答える 4

5

イベントで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!');
    }
});

これが実際の動作を示すフィドルです

于 2013-05-21T12:35:20.803 に答える
2

将来の要素にイベントと関数を追加するには、jquery の「ライブ」機能を使用する必要があります。

このコードは、別の投稿 (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})
于 2012-10-22T13:49:06.833 に答える
1

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

});

于 2012-10-22T13:45:15.670 に答える