有角度的掉落物品保持在掉落的位置答案

【问题标题】：Angular dropped item stay on dropped position有角度的掉落物品保持在掉落的位置
【发布时间】：2016-01-29 18:03:20
【问题描述】：

我正在使用angular-dragdrop 将图像从div 移动到另一个div。由于每个 div 都有自己的 $scope 列表，因此当我将一个元素从一个列表拖放到另一个列表时，接收该项目的列表会更新。

但是，当我将一个项目放入可放置区域时，它会转到左上角。它不会停留在我掉下的地方

这是我的html

可拖动

<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>

可丢弃

<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>

第二个列表中的项目 ( dropable ) 有一个指令 ( resizable ) 为项目设置一些信息。

如何让掉落的物品保持在掉落的位置？

【问题讨论】：

标签： angularjs angularjs-directive drag-and-drop jquery-ui-droppable angular-dragdrop

【解决方案1】：

$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);
};

由于您可以在放置函数中捕获位置，因此我决定只更新一个模型来管理每个可拖动项目的位置。在你的 drop 函数中：

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

然后在您的标记中，您可以重复这些项目并使用存储的属性以内联 ng 样式定位它们。

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

这些是我所做的基础知识，您很可能必须对其进行扩展以适应您的使用情况。就我而言，这会捕获像素，并且我正在转换为百分比以获得响应位置。我还启动了一个 $uibModal，它会在我放置它之前获取有关我的项目的更多信息。

【讨论】：