Ember.js로 드래그 앤 드롭

Question

Ember.js로 드래그 앤 드롭을 구현하는 방법에 대한 예제가 있습니까? jQuery UI를 사용해 보았지만 통합이 다소 복잡해 보입니다.

이 jsFiddle : http://jsfiddle.net/oskbor/Wu2cu/1/을 본 적이 있지만 내 자신의 앱에서 성공적으로 구현할 수 없었습니다.

Ember.js를 사용하여 간단히 드래그 & 드롭 구현을위한 옵션은 무엇입니까?

Answer 1

Remy Sharp가 post을보고 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>​ 

자바 스크립트 :

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

이 유망 보인다