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

How to drag and drop items to external container?

本文关键字：外部 拖放 项目      更新时间：2023-09-26

基本上，我有以下标记：

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

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

例如，您可以使用 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({});
    });
});

希望这能解决您的问题。

尝试将"鼠标按下"替换为"drop"。

相关文章：