drag-and-drop - Ember.jsでドラッグアンドドロップ

Question

Ember.jsでドラッグアンドドロップを実装する方法の例はありますか？jQuery UIを使ってみましたが、統合がやや複雑なようです。

私はこのjsFiddleを見ました：http：//jsfiddle.net/oskbor/Wu2cu/1/ですが、私自身のアプリでこれをうまく実装することができませんでした。

Ember.jsを使用したかなり単純なドラッグアンドドロップ実装のオプションは何ですか？

Answer 1

Remy Sharp の投稿を見て、Ember.js で基本的な例を実装しました。 http://jsfiddle.net/pangratz666/DYnNH/を参照してください。

ハンドルバー:

<script type="text/x-handlebars" >
    Drag and drop the green and red box onto the blue one ...

    {{view App.Box class="box green"}}
    {{view App.Box class="box red"}}

    {{view App.DropTarget class="box blue"}}
</script>​

JavaScript :

DragNDrop = Ember.Namespace.create();

DragNDrop.cancel = function(event) {
    event.preventDefault();
    return false;
};

DragNDrop.Dragable = Ember.Mixin.create({
    attributeBindings: 'draggable',
    draggable: 'true',
    dragStart: function(event) {
        var dataTransfer = event.originalEvent.dataTransfer;
        dataTransfer.setData('Text', this.get('elementId'));
    }
});

DragNDrop.Droppable = Ember.Mixin.create({
    dragEnter: DragNDrop.cancel,
    dragOver: DragNDrop.cancel,
    drop: function(event) {
        var viewId = event.originalEvent.dataTransfer.getData('Text');
        Ember.View.views[viewId].destroy();        
        event.preventDefault();
        return false;
    }
});

App.Box = Ember.View.extend(DragNDrop.Dragable);
App.DropTarget = Ember.View.extend(DragNDrop.Droppable);​