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

Question

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

感谢Drag&Drop with Ember.js和Ember.js - 拖放列表,我想出了如何将项目复制到不同的列表.但是,我无法确定拖动对象来自哪个列表.我在页面上有几十个列表,所以我宁愿不对原始对象进行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以获取完整代码.

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

Answer 1

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

希望能帮助到你