通過拖放將Ember對象從一個列表移動到另一個列表

我試圖將Ember對象從一個列表拖動到另一個列表。如果我將項目拖到新列表中，則應將項目從當前列表中移除並移至新項目。通過拖放將Ember對象從一個列表移動到另一個列表

感謝Drag&Drop with Ember.js和Ember.js - drag and drop list，我想出瞭如何將項目複製到不同的列表。但是，我無法確定從哪個列表拖動對象發起。我在頁面上有幾十個列表，所以我寧願不做一個O（n * k）搜索原始對象。

目前，我使用Ember視圖和HTML 5 API。這看起來像幫手應該更容易實現我的目標。 Ember的action支持drop事件，但我無法啓動它：{{ action foo on="drop" }}。它可能與HTML 5拖放實現的細微事件傳播默認值有關。

如果你知道如何使用動作而不是視圖解決這個問題，我更喜歡這個解決方案。

這裏是我當前如何轉移對象：

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

退房JS Bin for the complete code。

在此先感謝您的幫助。非常感謝。

來源

2013-05-06 nimbus154

這可能不是您的問題的完整解決方案，但它滿足使用操作幫助器而不是itemView的需要。這裏是你修改後的jsbin http://jsbin.com/ibufeh/15/edit?html,javascript,live，drop事件觸發，並在ApplicationRoute級別捕獲，從那裏你可以將你的函數調用重定向到適當的控制器，看看！它不能正常工作，但它解決了你的問題的一部分 - 使用動作助手。你仍然需要從哪個列表中找出該物品的來源，但我猜這很容易。

希望它有幫助

來源

2013-05-08 17:53:15 intuitivepixel

我很抱歉的響應延遲。非常感謝您花時間研究這個問題。雖然你說得對，你的解決方案並不完美，但它有助於說明如何使用「drop」動作。我現在實際上可以讓它開火。 – nimbus154 2013-05-14 05:39:58

通過拖放將Ember對象從一個列表移動到另一個列表

回答

相關問題