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>
2 番目のリストの項目 ( dropable ) には、項目に情報を設定するディレクティブ ( resizable ) があります。
ドロップしたアイテムをドロップした位置にとどまらせるにはどうすればよいですか?