通过拖放将 Ember 对象从一个列表移动到另一个列表

Question

我正在尝试将 Ember 对象从一个列表拖到另一个列表。如果我将一个项目拖到新列表中，则该项目应从其当前列表中删除并移至新列表。

感谢Drag&Drop with Ember.js 和Ember.js - drag and drop list，我知道如何将项目复制到不同的列表。但是，我无法确定拖动对象来自哪个列表。我在页面上有几十个列表，所以我不想对原始对象进行 O(n*k) 搜索。

目前，我正在使用 Ember 视图和 HTML 5 API。看起来 Handelbars action 助手应该更容易实现我的目标。 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。

提前感谢您的帮助。非常感谢。

Answer 1

这可能不是您问题的完整解决方案，但它满足了使用操作助手而不是 itemView 的需要。这是您修改后的 jsbin http://jsbin.com/ibufeh/15/edit?html,javascript,live，drop 事件触发并在 ApplicationRoute 级别捕获，然后您可以从那里将函数调用重定向到适当的控制器，看看！它工作不正常，但它解决了您的部分问题 - 使用动作助手。您仍然需要弄清楚该项目来自哪个列表，但我猜这很容易。

希望对你有帮助