5

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

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

目前，我正在使用 Ember 视图和 HTML 5 API。看起来 Handelbarsaction助手应该更容易实现我的目标。Emberaction支持该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 以获取完整代码。

在此先感谢您的帮助。非常感谢。

4

1 回答 1

0

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

希望能帮助到你

于 2013-05-08T17:53:15.160 回答