Przenoszenie obiektu Ember z jednej listy do drugiej za pomocą przeciągania i upuszczania

Question

Próbuję przeciągać obiekty Ember z jednej listy do drugiej. Jeśli przeciągnę element do nowej listy, element powinien zostać usunięty z bieżącej listy i przeniesiony do nowego.

Dzięki Drag&Drop with Ember.js i Ember.js - drag and drop list, wymyśliłem, jak skopiować element do innej listy. Nie jestem jednak w stanie określić, z której listy pochodzi przeciągany obiekt. Mam dziesiątki list na stronie, więc wolałbym nie wyszukiwać oryginalnego obiektu w trybie O (n * k).

Obecnie używam widoków Ember i interfejsu API HTML 5. Wygląda na to, że pomocnik Handelbars action powinien łatwiej osiągnąć mój cel. Ember action obsługuje wydarzenie drop, ale nie mogę go uruchomić: {{ action foo on="drop" }}. Prawdopodobnie ma to coś wspólnego z domyślnymi wartościami propagacji zdarzeń w implementacji drag-and-drop HTML 5.

Jeśli wiesz, jak rozwiązać ten problem za pomocą działań zamiast widoków, zdecydowanie wolę to rozwiązanie.

Oto jak ja obecnie przenoszenia przedmiotów:

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

Wyjazd JS Bin for the complete code.

Z góry dziękuję za pomoc. Bardzo doceniane.

Answer 1

To może nie jest pełne rozwiązanie problemu, ale zaspokaja potrzebę użycia pomocnika akcji zamiast itemView. Oto twoje zmodyfikowane zdarzenie jsbin http://jsbin.com/ibufeh/15/edit?html,javascript,live, drop, które jest przechwytywane na poziomie ApplicationRoute, skąd możesz przekierować wywołanie funkcji do odpowiedniego kontrolera, spójrz! nie działa poprawnie, ale rozwiązuje część problemu - za pomocą pomocnika akcji. Nadal musisz dowiedzieć się, z której listy pochodzi dany przedmiot, ale będzie to łatwe, jak sądzę.

mam nadzieję, że pomoże