끌어서 놓기로 한 목록에서 다른 목록으로 Ember 개체 이동

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 대신 action helper를 사용해야 할 필요성을 충족시킵니다. 여기에 수정 된 jsbin http://jsbin.com/ibufeh/15/edit?html,javascript,live이 있고 drop 이벤트가 발생하고 ApplicationRoute 레벨에서 잡아 당겨서 함수 호출을 적절한 컨트롤러로 리디렉션 할 수 있습니다. 그것은 올바르게 작동하지 않지만 당신의 문제의 일부를 해결합니다 - 행동 도우미를 사용하십시오. 항목이 어떤 목록에서 유래 되었는가를 파악하는 것이 필요하지만 쉽게 추측 할 수 있습니다.

희망 하시겠습니까?