如何将项目拖放到外部容器？答案

【问题标题】：How to drag and drop items to external container?如何将项目拖放到外部容器？
【发布时间】：2016-07-13 17:53:18
【问题描述】：

基本上，我有以下标记：

<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 事件，但未按预期工作。

【问题讨论】：

您需要在目标“外部”容器上捕获 drop 事件。
两年前我提出了feature request，但没有运气......

标签： javascript jquery angularjs jquery-ui-sortable

【解决方案1】：

您正在使用的库是排序库。您需要为此使用拖放库。

例如，您可以使用https://github.com/codef0rmer/angular-dragdrop

请参阅所有可用事件回调的文档。

直接复制示例代码sn-p（参考查看here），

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({});
    });
});

希望这能解决您的问题。

【讨论】：

谢谢！问题是我需要那种排序功能，这就是它被使用的原因。
我明白了。那么也许你可以检查marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/…？

【解决方案2】：

尝试将“mousedown”替换为“drop”。

【讨论】：