刪除並添加項目在鼠標位置|角拖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

回答

相關問題