删除并添加项目在鼠标位置|角拖Dragdrop

使用https://github.com/codef0rmer/angular-dragdrop 删除并添加项目在鼠标位置|角拖Dragdrop

我正在寻找一种方法来添加一个项目到放置位置的列表。我该怎么做？

我想这样做没有成功

<div ui-sortable ng-model="landing.header"> 
    <div ng-repeat="value in landing.header | unique:src" 
     ng-model="landing.header" data-drop="true" 
     jqyoui-droppable="{index:{{$index}},multiple:true, stack:true}">

来源

2017-10-16 Silvio Troia

你可以提供更多关于'我正在寻找一种方式将物品添加到列表中的位置'吗？不清楚 –

看看我创建的下面的Plunker。 https://plnkr.co/edit/PzwzyUXa3kTMiUrT7YSK?p=preview 让我知道，如果你正在寻找相同的行为，所以我会张贴在答案相同。 – varit05

是@ varit05该库与https://github.com/codef0rmer/angular-dragdrop兼容吗？ –

库使用：dnd-draggable directive

请看看代码片段的拖拽列表。

var app = angular.module('plunker', ['dndLists']); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.lists = { 
 
    "A": [], 
 
    "B": [], 
 
    "C": [] 
 
    }; 
 

 
    // Generate initial model 
 
    for (var i = 1; i <= 3; ++i) { 
 
    $scope.lists.A.push({ 
 
     label: "Item A" + i 
 
    }); 
 
    $scope.lists.B.push({ 
 
     label: "Item B" + i 
 
    }); 
 
    $scope.lists.C.push({ 
 
     label: "Item C" + i 
 
    }); 
 
    } 
 

 
    $scope.dropCallback = function(item, type, listName) { 
 
    console.log(item.label + " was dragged from list " + 
 
     type + " to list " + listName); 
 
    return item; // return false to disallow drop 
 
    }; 
 

 
});

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script> 
 
    document.write('<base href="' + document.location + '" />'); 
 
    </script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-drag-and-drop-lists/2.1.0/angular-drag-and-drop-lists.js"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <div ng-repeat="(listName, list) in lists"> 
 
    <ul dnd-list="list" dnd-drop="dropCallback(item, type, listName)"> 
 
     <li ng-repeat="item in list" dnd-draggable="item" dnd-type="listName" dnd-moved="list.splice($index, 1)" dnd-effect-allowed="move"> 
 
     {{item.label}} 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</body> 
 

 
</html>

请随意问任何问题。

干杯！

来源

2017-10-26 13:14:14 varit05

我们可以用不同的清单来做到吗？ $ scope.lists = {“A”：[{...}]}; $ scope.results = {“B”：[{...}]}; –

你能给我提供柱塞还是小提琴你究竟想要做什么？ – varit05

https://plnkr.co/edit/Zi7YyzilUvYpYhaTT7Zb ...尝试在最后一个清单中的药品 –

删除并添加项目在鼠标位置|角拖Dragdrop

回答

相关问题