Search code examples
phphtmltypescriptdraggabledragula

Dragula - passing class on dragula drop event


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?


Solution

  • 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