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

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?


Solution

  • $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.