To enhance the manual sorting process of nested ngRepeats, I have implemented three directives: draggable, droppable, and drop boundary.
The draggable and droppable directives are functioning correctly, utilizing event listeners to facilitate drag and drop operations on <div> elements within the inner ngRepeat. However, I aim to limit this functionality only to allow dragging and dropping within a specific ngRepeat (meaning users should not be able to drag items from one result set to another).
Within my AngularJS view, with the ngRepeats in place, the structure is as follows:
<div ng-repeat="tank in tankdata">
<div dgs-drop-boundary>
<div class="row bin" dgs-droppable drop="handleDrop" bin="bin" id="bin-{{$index}}" ng-repeat="blend in tank.TankResult.BlendFills">
<div class="row item" dgs-draggable item="{{ blend }}" id="item-{{$parent.$index}}-{{$index}}" >
</div>
</div>
</div>
The desired outcome is for the drop boundary directive to prevent a draggable item from leaving the outer <div>.
I have added an event listener for 'dragleave' on the drop boundary directive:
el.addEventListener(
'dragleave',
function (e) {
//What should be done here?
},
false
);
Yet, I am struggling to figure out how to stop the drag operation. I attempted triggering 'dragend', but it does not seem to work as intended:
el.addEventListener(
'dragleave',
function (e) {
var event = new Event('dragend', {
'view': window,
'bubbles': true,
'cancelable': true
});
document.dispatchEvent(event);
return false;
},
false
);