角落掉落物品停留在掉落位置

我使用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）有一個指令（可調整大小）來設置項目的一些信息。

我該如何讓丟棄的物品停留在丟棄位置？

來源

2016-01-29 Leo

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

既然你可以捕捉你降功能的位置，我決定只更新管理每個可拖動項目的位置的模型。在你滴功能：

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

然後在你的標記，你也可以在項目重複，並使用存儲的屬性將它們與內聯納克風格的定位。

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

這些是我所做的基礎知識，而且您最有可能必須將其擴展以適合您的使用。在我的情況下，這捕獲像素，我轉換爲百分比，以獲得響應位置。我還推出了一個$ uibModal，在我放置它之前獲取有關我的物品的更多信息。

來源

2016-02-17 18:26:22 jssayin

角落掉落物品停留在掉落位置

回答

相關問題