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