Come trascinare una griglia da un gridster ad un altro gridster?

Question

Come posso trascinare una griglia da un gridster ad un altro gridster?

$(function() { //DOM Ready 

    $(".gridster ul").gridster({ 
     widget_margins: [5, 5], 
     widget_base_dimensions: [160, 160] 
    }); 

    var gridster = $(".gridster ul").gridster().data('gridster'); 
    $(".draggable").draggable(); 
    $(".gridster ").droppable({ 
     drop: function(event, ui) { 
      $(".draggable").removeAttr("style"); 
      gridster.add_widget('<li class="new"></li>', 1, 1);     
     } 
    });       
}); 

Answer 1

È possibile utilizzare le funzioni remove_widget e add_widget dell'API del griglia per aggiungere e rimuovere i widget.

Per vedere se un widget viene trascinato, è possibile vedere se la posizione di partenza del mouse è cambiata da quando si preme il mouse su un widget, con l'evento onmousedown, fino a quando si rilascia il clic, il onmouseup evento. Confronta la posizione iniziale e finale per vedere se abbiamo trascinato un widget, quindi, se lo abbiamo fatto, controlla se abbiamo trascinato il widget su uno degli altri gridster confrontando la posizione di rilascio con l'offset di tutti gli oggetti gridster. Se abbiamo lasciato su qualsiasi altro gridsters, basta chiamare la funzione remove_widget del gridster l'elemento era in e chiamare la funzione add_widget del gridster dovrebbe essere messo in.

ho fatto la maggior parte in questo jsFiddle, dà alcuni errori che sono probabilmente a causa di gridster.js ancora in fase beta: http://jsfiddle.net/Ld2zc/11/