Question

C'è una div con id parentDiv, e ci sono alcuni div con classe block1 in parentDiv divl

come

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

e in jQuery, div con classe block1, sono trascinabili.

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

Questi div funzionano come aspetto, ma il problema è, se qualsiasi nuova div con block1 viene aggiunto nel parentDiv cliccando sul btn ingresso come

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

che non è possibile trascinare.

Sì, non funzionerà, perché non era in DOM.

siamo in grado di definire un evento click su #btn div ai suoi figli input.button, e se aggiungiamo nuovi input con il tasto di classe in questo #btn div, tutto funzionerà come aspetto.

Quindi la mia domanda è, c'è un modo per rendere tutti i droppabili div in un contenitore genitore parentDiv, come possiamo fare con div #btn?

Answer 1

È necessario utilizzare la funzione "live" di jquery per aggiungere eventi e funzioni agli elementi futuri.

Questo codice è preso in prestito da un altro post (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)); 

Ora, invece di chiamarla Mi piace:

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

...basta usare:

$(selector).liveDraggable({opts}) 

Answer 2

È necessario impostare la proprietà containment su padre per limitare l'area.

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

Per abilitare trascinabili per il nuovo elemento dinamico, che cosa si può fare è, spostare il codice che lega la caratteristica draggablity a un metodo e chiamare quel metodo dopo aver aggiunto nuovo elemento al DOM

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

Ora lo chiamano il documento pronto e subito dopo si aggiungono nuovi contenuti

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

È possibile utilizzare il jQuery on method con l'evento mouseover di legarsi non inizializzate figli trascinabili:

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

Per comodità, avvolti in una funzione che si estende 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; 
    } 
}); 

È possibile utilizzare questo come segue:

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

e ora si può fare quello che volete