如何將項目拖放到外部容器？
[英]How to drag and drop items to external container?
問題描述
基本上，我有以下標記：
<script>
$(function() {
$('.box').on('mousedown', function(e) {
console.log(e);
});
});
</script>
<body ng-controller="MainCtrl">
<ul ui-sortable="sortableOptions" ng-model="list">
<li draggable ng-repeat="item in list">Item: {{item}}</li>
</ul>
<div class="boxes">
Drop to external area: <br/><br/>
<div class="box" style="background: red;"></div>
<div class="box" style="background: yellow;"></div>
<div class="box" style="background: orange;"></div>
</div>
</body>
小提琴 ： http : //plnkr.co/edit/xKw6sSbymA5M8R2v4OGF ? p=preview
現在，我希望能夠將列表中的項目拖放到該“外部”容器中。
當用戶將項目“拖放”到任何有色區域時，我想知道該事件剛剛發生以及哪個元素受到了影響
已經嘗試在每個.box元素上偵聽mousedown/mouseup事件，但無法正常工作。
2 個解決方案
解決方案1
1 已采納 2016-07-13 18:29:00
您正在使用的庫是排序庫。 您需要為此使用拖放庫。
例如，您可以使用https://github.com/codef0rmer/angular-dragdrop
有關所有可用的事件回調，請參考文檔。
直接復制示例代碼段（供此處參考），
HTML：
<ul class="thumbnails">
<li style='margin-left:10px;' ng-repeat="item in list1">
<div class="btn"
data-drop="true"
ng-model='list1'
jqyoui-droppable="{index: {{$index}}}">
<div class="btn btn-info"
ng-show="item.title"
data-drag="{{item.drag}}"
data-jqyoui-options="{revert: 'invalid'}"
ng-model="list1"
jqyoui-draggable="{index: {{$index}},placeholder:true,animate:true}">
{{item.title}}
</div>
</div>
</li>
</ul>
<div class="container form-inline" style="text-align: center;">
<div class="btn"
ng-repeat="item in list2 | orderBy : 'title'"
data-drop="true"
ng-model='list2'
jqyoui-droppable="{index: {{$index}}, applyFilter: 'filterIt'}">
<div class="btn btn-info"
data-drag="{{item.drag}}"
data-jqyoui-options="{revert: 'invalid'}"
ng-model="list2"
jqyoui-draggable="{index: {{$index}},animate:true, applyFilter: 'filterIt'}"
ng-hide="!item.title">
{{item.title}}
</div>
</div>
</div>
控制器：
App.controller('YourCtrl', function($scope, $filter) {
$scope.filterIt = function() {
return $filter('orderBy')($scope.list2, 'title');
};
$scope.list1 = [];
$scope.list2 = [
{ 'title': 'Item 3', 'drag': true },
{ 'title': 'Item 2', 'drag': true },
{ 'title': 'Item 1', 'drag': true },
{ 'title': 'Item 4', 'drag': true }
];
angular.forEach($scope.list2, function(val, key) {
$scope.list1.push({});
});
});
希望這能解決您的問題。
解決方案2
-1 2016-07-13 18:06:31
嘗試將“ mousedown”替換為“ drop”。
容器中有多個項目（拖放）
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.