Angularjs 角度下降的物品保持在下降位置
我正在使用将图像从一个Angularjs 角度下降的物品保持在下降位置,angularjs,angularjs-directive,drag-and-drop,jquery-ui-droppable,angular-dragdrop,Angularjs,Angularjs Directive,Drag And Drop,Jquery Ui Droppable,Angular Dragdrop,我正在使用将图像从一个div移动到另一个div。由于每个div都有自己的$scope列表,当我将一个元素从一个列表拖放到另一个列表时,接收该项的列表将被更新 但是,当我将一个项目放入可拖放区域时,它会进入左上角。它不会停留在我掉下来的地方 这是我的html 可拖动的 <div class="sand-image" ng-repeat="item in filtered = (products | filter: {cat : config.category.id}:true) | i
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>
可下拉式
<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)有一个指令(Resizeable),用于为该项设置一些信息
如何使被丢弃的物品保持在被丢弃的位置?
$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函数中捕获位置,因此我决定只更新一个模型来管理每个可拖动项的位置。在drop函数中:
jqyoui-droppable="{onDrop: 'dropaction($event)'}"
然后在标记中,您可以重复项目,并使用存储属性以内联ng样式定位它们
ng-repeat="item in someList" ng-style="{'left': item.left, 'top': item.top}"
这些是我所做工作的基础,您很可能需要扩展它以适应您的使用。在我的例子中,这捕获像素,我转换成百分比,以获得响应位置。我还启动了一个$uibModal,它在我放置物品之前会获取更多信息
由于您可以在drop函数中捕获位置,因此我决定只更新一个模型来管理每个可拖动项的位置。在drop函数中:
jqyoui-droppable="{onDrop: 'dropaction($event)'}"
然后在标记中,您可以重复项目,并使用存储属性以内联ng样式定位它们
ng-repeat="item in someList" ng-style="{'left': item.left, 'top': item.top}"
这些是我所做工作的基础,您很可能需要扩展它以适应您的使用。在我的例子中,这捕获像素,我转换成百分比,以获得响应位置。我还启动了一个$uibModal,它在我放置物品之前会获取更多信息