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级别捕获，然后您可以将函数调用重定向到相应的控制器，看看！它没有正常工作，但它解决了部分问题 - 使用动作助手。你还需要弄清楚该项目来自哪个列表，但我想这很容易。

希望有所帮助

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

1 个答案: