Create two directives: Draggable and DropTarget. Items that going to be “dragged” are decorated with Draggable directive and the container where the items are dropped is decorated with DropTarget directive.
// DraggableDirective.js
var Draggable = function () {
return {
restrict: "A",
link: function(scope, element, attributes, ctlr) {
element.attr("draggable", true);
element.bind("dragstart", function(eventObject) {
eventObject.originalEvent.dataTransfer.setData("text", attributes.itemid);
});
}
};
}
// DropTargetDirective.js
var DropTarget= function () {
return {
restrict: "A",
link: function (scope, element, attributes, ctlr) {
element.bind("dragover", function(eventObject){
eventObject.preventDefault();
});
element.bind("drop", function(eventObject) {
// invoke controller/scope move method
scope.moveToBox(parseInt(eventObject.originalEvent.dataTransfer.getData("text")));
// cancel actual UI element from dropping, since the angular will recreate a the UI element
eventObject.preventDefault();
});
}
};
}