html5 - Move Ember object from one list to another with drag-and-drop -


i'm trying drag ember objects 1 list another. if drag item new list, item should removed current list , moved new one.

thanks drag&drop ember.js , ember.js - drag , drop list, figured out how copy item different list. however, unable determine list dragged object originated. have dozens of lists on page, i'd rather not o(n*k) search original object.

currently, i'm using ember views , html 5 api. seems handelbars action helper should achieve goal more easily. ember's action supports drop event, can't fire: {{ action foo on="drop" }}. has nuanced event propagation defaults of html 5 drag-and-drop implementation.

if know how solve problem using actions instead of views, i'd prefer solution.

here's how i'm transferring objects:

// heavily inspired 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;         // view's context item transfer         var item = this.get('context');         // use html 5 api transfer object json.         // there must more elegant way 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 transferred data         var rawdata = event.datatransfer.getdata('application/json');          // create new ember object data         var item = app.todo.create(json.parse(rawdata));         this.get('controller').send('add', item);         return false;     } }); 

check out js bin complete code.

thanks in advance help. appreciated.

this maybe not full solution problem, satisfies need use action helper instead of itemview. here modified jsbin http://jsbin.com/ibufeh/15/edit?html,javascript,live, drop event fires , catched @ applicationroute level, can redirect function call appropriate controller, have look! it's not working correctly solves part of problem - using action helper. need still figure out list item originated, easy guess.

hope helps


Comments