Question

Jest div id parentDiv, i istnieją pewne div z klasą block1 w parentDiv divl

jak

<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> 

i w jQuery, div z klasą block1 są przeciągalne.

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

Te div pracuje jako aspektu, ale problemem jest to, czy każdy nowy div z block1 jest dołączany w parentDiv klikając btn wejścia jak

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

że nie jest przeciągany.

Tak, to nie zadziała, ponieważ nie było w DOM.

Jesteśmy w stanie określić zdarzenie click na #btn div do swoich dzieci input.button, a jeśli dodamy nowe wejście z przyciskiem klasy w tym #btn div, wszystko będzie działać jako aspekt.

Moje pytanie brzmi: Czy istnieje sposób na wykonanie całego elementu dowiązanego przez div w kontenerze nadrzędnym parentDiv, tak jak możemy zrobić z #btn div?

Answer 1

Musisz użyć funkcji "live" jquery, aby dodać zdarzenia i funkcje na przyszłych elementach.

Kod ten jest zapożyczony z innego wątku (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)); 

Teraz zamiast nazywając ją na przykład:

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

...wystarczy użyć:

$(selector).liveDraggable({opts}) 

Answer 2

Musisz ustawić właściwość containment na rodzic, aby ograniczyć obszar.

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

Aby włączyć przeciągany dla nowego elementu dynamicznego, co można zrobić, to przenieść kod, który wiąże się z funkcji draggablity do metody i wywołać tę metodę po dodaniu nowego elementu do DOM

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

teraz nazywają to na dokumencie gotowy i wkrótce po dodaniu nowej zawartości

$(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 3

Można użyć jQuery on method ze zdarzeniem mouseover związać niezainicjowane można przeciągać dzieci:

$(".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 */ 
     }); 
}); 

dla wygody, zapakowane w funkcji, która rozciąga 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; 
    } 
}); 

Możesz użyć tego w następujący sposób:

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

Here is a fiddle showing it in action

Answer 4

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

a teraz można zrobić to, co kiedykolwiek chcesz