Kéo & thả với Ember.js

Question

Có ví dụ về cách triển khai Kéo và Thả với Ember.js không? Tôi đã thử sử dụng jQuery UI, nhưng việc tích hợp có vẻ hơi phức tạp.

Tôi đã xem jsFiddle: http://jsfiddle.net/oskbor/Wu2cu/1/ nhưng chưa thể triển khai thành công ứng dụng này trong ứng dụng của riêng tôi.

Các tùy chọn cho việc kéo thả đơn giản & thực hiện thả bằng cách sử dụng Ember.js là gì?

Answer 1

Tôi đã xem post bởi Remy Sharp và triển khai một ví dụ cơ bản trong Ember.js, xem http://jsfiddle.net/pangratz666/DYnNH/.

tay lái:

<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);​