Dragula - passing class on dragula drop event

Question

So i have an object thats draggable to multiple columns and I need to make it so that when it is dropped a variable in that object gets updated depending on what column that is, as another object manipulates that variable for display. i have been unable to get the (ondrop) event to work from the tag, and the dragula event listener's value doesnt pass me any information that would allow me to get the object. Is there anyway to force the event listener to pass the object instead of the html tags? or is there some method im missing?

Answer 1

The only solution I have found (short from using a different drag'n'drop module) is to save the order when the user closes the page or goes to something else. Or since the drop event is catch-able, but does not seem to be able to give a class object, you can still detect when there was a change and have it update everything, however that is not the best work around as it is far more taxing on system resources than updating one variable.

Answer 2

I think you can update data on drop. I've done it like this:

var drake = dragula({...});

function updateMyObject(elementId, listId) {
  // update the object here, for example:
  if (listId === 'firstList') {
    // use the element id to find the item in your object and update it
    myDataObject.filter(function(x) {
      return x.id === elementId;
    })[0].propertyToUpdate = listId;
  }
}

drake.on('drop', function(el, target, source, sibling) {
  var elementId = el.id;
  updateMyObject(el.id, target.id);
});

This pen may help. I'm mixing Dragula with Angular.js for the data modelling. The event needs to update the data model on drop. http://codepen.io/chris22smith/pen/37459a002cbe6b6cd37aa5e927698fba

Answer 3

Pass the order # as an attribute in your element so it's accessible in your drake.on function. With the oder# and the ID you should be able to figure out what to do with it and make the right updates on the backend.