Question

基本上，我有以下标记：

<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

现在，我希望能够将列表中的项目拖放到＆＃34;外部＆＃34;容器。

当用户＆＃34;掉线＆＃34;项目到任何有色区域，我想知道事件刚刚发生以及哪个元素受到影响

已经尝试在每个mousedown/mouseup元素上监听.box个事件，但它并没有按预期工作。

Answer 1

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

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

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

直接复制示例代码段（供参考检查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({});
    });
});

希望这能解决你的问题。

Answer 2

尝试将'mousedown'替换为'drop'。

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

2 个答案: