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

Question

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

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

目前，我正在使用 Ember View 和 HTML 5 API。似乎 Handelbars action 助手应该更容易实现我的目标。 Ember 的 action 支持 drop 事件，但我无法触发它:{{ action foo on="drop"}}。它可能与 HTML 5 拖放实现的细微事件传播默认值有关。

如果您知道如何使用操作而不是 View 来解决此问题，我会更喜欢该解决方案。

这是我目前传输对象的方式:

// 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

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

希望对你有帮助