Di chuyển đối tượng Ember từ danh sách này sang danh sách khác bằng cách kéo và thả

Question

Tôi đang cố kéo đối tượng Ember từ danh sách này sang danh sách khác. Nếu tôi kéo một mục vào một danh sách mới, mục đó sẽ bị xóa khỏi danh sách hiện tại của nó và chuyển sang mục mới.

Nhờ Drag&Drop with Ember.js và Ember.js - drag and drop list, tôi đã tìm ra cách sao chép một mục vào một danh sách khác. Tuy nhiên, tôi không thể xác định danh sách đối tượng đã kéo có nguồn gốc từ danh sách nào. Tôi có hàng chục danh sách trên trang, vì vậy tôi không muốn thực hiện tìm kiếm O (n * k) cho đối tượng gốc.

Hiện tại, tôi đang sử dụng chế độ xem Ember và API HTML 5. Có vẻ như người trợ giúp Handbbars action sẽ đạt được mục tiêu của tôi dễ dàng hơn. Ember của action hỗ trợ sự kiện drop, nhưng tôi không thể làm cho nó cháy: {{ action foo on="drop" }}. Nó có thể có một cái gì đó để làm với mặc định tuyên truyền sự kiện sắc thái của việc thực hiện kéo và thả HTML 5.

Nếu bạn biết làm thế nào để giải quyết vấn đề này bằng cách sử dụng hành động thay vì quan điểm, tôi rất thích giải pháp đó.

Đây là cách tôi đang chuyển đối tượng:

// 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; 
    } 
}); 

Check-out JS Bin for the complete code.

Cảm ơn trước sự giúp đỡ của bạn. Rất nhiều đánh giá cao.

Answer 1

Đây có thể không phải là giải pháp đầy đủ cho vấn đề của bạn, nhưng nó đáp ứng nhu cầu sử dụng trình trợ giúp hành động thay vì itemView. Dưới đây là jsbin đã sửa đổi của bạn http://jsbin.com/ibufeh/15/edit?html,javascript,live, sự kiện drop kích hoạt và được bắt ở mức ApplicationRoute, từ đó bạn có thể chuyển hướng cuộc gọi chức năng của mình tới bộ điều khiển thích hợp, hãy xem! nó không hoạt động chính xác nhưng nó giải quyết một phần vấn đề của bạn - bằng cách sử dụng một trình trợ giúp hành động. Bạn vẫn cần phải tìm ra từ đó danh sách các mục có nguồn gốc, nhưng điều này sẽ được dễ dàng tôi đoán.

hy vọng điều này sẽ giúp