Sposta oggetto rosso da una lista a un'altra con il drag-and-drop

Question

Sto provando a trascinare oggetti di colore da una lista all'altra. Se trascino un elemento in un nuovo elenco, l'elemento dovrebbe essere rimosso dal suo elenco corrente e spostato in quello nuovo.

Grazie a Drag&Drop with Ember.js e Ember.js - drag and drop list, ho scoperto come copiare un elemento in un elenco diverso. Tuttavia, non sono in grado di determinare da quale elenco è stato generato un oggetto trascinato. Ho dozzine di liste sulla pagina, quindi preferirei non fare una ricerca di O (n * k) per l'oggetto originale.

Attualmente, sto utilizzando le viste Ember e l'API HTML 5. Sembra che l'helper Handelbars action possa raggiungere il mio obiettivo più facilmente. Ember's action supporta l'evento drop, ma non riesco a farlo sparare: {{ action foo on="drop" }}. Probabilmente ha qualcosa a che fare con le impostazioni predefinite di propagazione degli eventi dell'implementazione drag-and-drop HTML 5.

Se sai come risolvere questo problema utilizzando le azioni anziché le visualizzazioni, preferirei molto quella soluzione.

Ecco come Attualmente sto trasferimento di oggetti:

// this is heavily inspired by http://jsfiddle.net/ud3323/5uX9H/ 
// Draggable items 
App.ItemView = Ember.View.extend({ 
    templateName: 'item', 
    attributeBindings: 'draggable', 
    draggable: 'true', 
    dragStart: function(event) { 
     var dataTransfer = event.originalEvent.dataTransfer; 
     // The view's context is the item to transfer 
     var item = this.get('context'); 
     // Use HTML 5 API to transfer object as JSON. 
     // There must be a more elegant way to do this. 
     dataTransfer.setData('application/json', JSON.stringify(item)); 
    } 
}); 

// Item list drop zone 
App.ItemListView = Ember.View.extend({ 
    templateName: 'itemList', 
    dragEnter: function(event) { 
     event.preventDefault(); 
     return false; 
    }, 
    dragOver: function(event) { 
     event.preventDefault(); 
     return false; 
    }, 
    drop: function(event) { 
     event.preventDefault(); 

     // Extract the transferred data 
     var rawData = event.dataTransfer.getData('application/json'); 

     // Create a new Ember object from the data 
     var item = App.Todo.create(JSON.parse(rawData)); 
     this.get('controller').send('add', item); 
     return false; 
    } 
}); 

Partenza JS Bin for the complete code.

Grazie in anticipo per il vostro aiuto. Davvero apprezzato.

Answer 1

Questa soluzione potrebbe non essere la soluzione completa al problema, ma soddisfa la necessità di utilizzare l'helper azione anziché itemView. Ecco la tua jsbin modificata http://jsbin.com/ibufeh/15/edit?html,javascript,live, l'evento drop si attiva e viene catturato al livello ApplicationRoute, da dove puoi quindi reindirizzare la tua chiamata di funzione al controller appropriato, dai un'occhiata! non funziona correttamente ma risolve parte del tuo problema - utilizzando un helper di azione. Hai ancora bisogno di capire da quale lista l'oggetto è nato, ma questo sarà facile immagino.

sperare che aiuti