codef0rmer/angular-dragdrop

Dropping on a previously dropped area

SpringsTea opened this issue · 4 comments

I have a bunch of things that can be dropped on a single drop space. If I drop while there is currently data in the model for that space, it is over written with the newly dropped items data, which is great.

But I'd like to check the old data before the drop is completed to do logic, allow or reject the drop etc.

So I currently have in the directive for my drop object:

controller: function($scope, $q){
    $scope.beforeDrop = function() {
	var deferred = $q.defer();
            //do stuff
	deferred.resolve();
	return deferred.promise;
     };
}

How can I check the data currently held in the model before the drop completes?

You get two params in the callback as

beforeDrop: function(event, ui) {
    console.log('dropped: ', event.target);
    console.log('dragged: ', ui.draggable);
}

I'm sorry, I'm new to Angular, so maybe I'm missing something obvious, but both of those params show me the new node, not the one being dragged over.

Just to make my question a little clearer:

I currently have a circle in my drop area. I drag a square into that same drop area. Before the drop happens, I would like to verify if there is currently a circle in the drop area, and if there is, reject the square drop.

@SpringsTea Please share JSFIDDLE or PLUNKR demo link to investigate further.

Ok, I think I figured this out while playing with one of your demos.
I was logging out event.target to try and get the previous node, but it was only giving me the new one.
I see now that it was just a reference, so it was being updated when I resolved the callback.

Storing the nodes scope before logging made this apparent.

$scope.beforeDrop = function(event, ui) {
var $dropped = $(event.target);
var deferred = $q.defer();
var shape = $dropped.scope().shape;

if( typeof shape=== 'undefined' ){
	deferred.resolve();	
}
else{
	deferred.reject();	
}
			    
console.log('dropped: ', event.target);
console.log('dragged: ', ui.draggable);
				

return deferred.promise;
};