Sortable: "Accept" functionality

[chrishaigy]

Is there any possibility of including an "accept" callback in future releases?

Essentially, say I have three sortable lists, one of all animals, one of only fish, and one of only mammals. I'd like to able to be able to drag from the list of all animals into one of the other two lists, and have it run a check as to whether the item I'm currently dragging will be accepted by that list:
accept: function(event) { return event.target.accepts === event.source.type; }
So if the accept function returns false the placeholder image won't appear and the user can't drop into that list.

Other drag and drop sortable lists similar to yours have this feature but they have their own issues and I'd much rather use Sortable.

[nilsoberg2]

I'm working around this by giving Sortable an onMove function that does those checks and returns false. However, the placeholder still shows. Your suggestion would be a nice feature to have.

[chrishaigy]

I ended up making my own by adding a sortable-accepts=[ARRAY_OF_ACCEPTED_TYPES] to the angular element with ng-sortable on it, and sortable-type={TYPE} to the angular element, and then put in Sortable.js the following line in the _onDragOver function:

if (el.attributes['sortable-accepts'] && dragEl.attributes['sortable-type'] && JSON.parse(el.attributes['sortable-accepts'].value).indexOf(dragEl.attributes['sortable-type'].value) < 0) { return true; }

If the target has that sortable-accepts attribute and the dragging element has a type and they don't match, then it treats it as if it's outside the dragging area.

[ulken]

You can use either group or onMove to achieve that.

Using group:

put: function(to, from, dragEl) {
    return to.el.dataset.accepts === dragEl.dataset.type;
}

See: http://jsbin.com/faxavecuge/edit?html,css,js,output for a complete example.

Using onMove:

onMove: function(event) {
    return event.to.dataset.accepts.indexOf(event.dragged.dataset.type) !== -1;
}

See: http://jsbin.com/ruwoxejagi/edit?html,css,js,output for a complete example.