CODEWITHSUNDEEP
angularjsangularjs-directivedrag-and-dropjquery-ui-droppableangular-dragdrop
Leo
Leo

Reputation: 1231

Angular dropped item stay on dropped position

I'm using angular-dragdrop to move images from on div to another div. As each div has its own $scope list, when I drop an element from one to another list, the list which receives the item is updated.

However when I drop an item into the droppable area, it goes to top-left corner. It does not stay where I dropped

enter image description here

this is my html

Draggable

<div class="sand-image" ng-repeat="item in filtered = (products  | filter: {cat : config.category.id}:true) | 
itemsPerPage: pageSize" 
current-page="currentPage"
data-drag="true" 
data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" 
ng-model="products" 
jqyoui-draggable="{index:$index,applyFilter:'{{getIndex(item)}}',
placeholder: 'keep',deepCopy :true}"
></div>

Droppable

<div class="wrap" id="sand-ground" 
data-drop="true" 
ng-model='box' 
jqyoui-droppable="{multiple:true, deepCopy:true ,onOver :'stop',containment :'position'}" >
<!-- item html -->
 <div class="draggable" ng-repeat="item in box track by $index" resizable  ><img src="{{item.url}}" ></div>

The item in the second list ( dropable ) has a directive ( resizable )to set some info to the item.

How can I make the dropped item stay on dropped position?

Upvotes: 1

Views: 2494

Answers (1)

jssayin
jssayin

Reputation: 93

$scope.dropAction = function(event, ui) {
     console.log('left:', ui.position.left, 'top:', ui.position.top, ui);
     // update model
     var newItem = {
          left:, ui.position.left, 
          top:, ui.position.top
     };
     $scope.someList.push(newItem);
};

Since you can capture the position in your drop function, I decided to just update a model that manages the positions of each draggable item. In your drop function: 

jqyoui-droppable="{onDrop: 'dropaction($event)'}"

Then in your markup you can repeat through the items and use the stored property to position them with inline ng-style. 

ng-repeat="item in someList" ng-style="{'left': item.left, 'top': item.top}"

These are the basics of what I did and you will most likely have to expand it to fit your usage. In my case, this captures pixels and I am converting to percentages in order to get responsive positions. I also launch a $uibModal that takes more information about my item before I place it.

Upvotes: 4

Related Questions