AngularJS移动卡片中的拖放指令

Posted 2023-05-08

【中文标题】AngularJS移动卡片中的拖放指令

【英文标题】：Drag And Drop Directiv in AngularJS moving cards

【发布时间】：2018-03-02 23:01:41

【问题描述】：

我使用这个指令：http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/types

我在移动卡片时遇到问题，当我将卡片移动得更高时可以，如果卡片减少，问题就开始了。

我做了这个功能：

if ($scope.movingItem.indeksList == index) 
        console.log('qrwa')
        $scope.lists[$scope.movingItem.indeksList].cards.splice($scope.movingItem.IndexCard +1, 1);
        $scope.lists[index].cards = external[index].cards;
     else 
        console.log('qrwa2')
        $scope.lists[$scope.movingItem.indeksList].cards.splice($scope.movingItem.IndexCard, 1);
        $scope.lists[index].cards = external[index].cards;
    

如果我在同一个列表中进行移动并且我将卡移动到更高的位置是可以的，那么必须执行：

$scope.lists[$scope.movingItem.indeksList].cards.splice($scope.movingItem.IndexCard +1, 1);

当必须从上到下进行时：

$scope.lists[$scope.movingItem.indeksList].cards.splice($scope.movingItem.IndexCard, 1);

这是一个问题，我无法获得 $index 我在哪个地方放置卡片如果我将卡片移动到较低位置则执行此操作，如果较高则执行此操作...

这是整个项目： https://plnkr.co/edit/BVF0KxPrWiCeGDXVpQDV?p=preview

【参考方案1】：

此代码有效：

$scope.dropCallback = function (index, item, external) 
  $scope.lists[$scope.movingItem.indeksList].cards.splice($scope.movingItem.IndexCard, 1);
  $scope.lists[index].cards = external[index].cards;

  console.log($scope.lists[index].cards)

  return item;
;

在这种情况下不需要观察者，因为dropCallback 函数本身会通知您更改。

您的工作只是像您一样删除索引处的项目。无论移动方向如何。

编辑

这里是the working plunker

【参考方案2】：

不知道为什么你需要使用dropCallback 来移动列表中的项目。您可以使用dnd-moved="item.cards.splice($index, 1)"，如demo所示。

查看代码的更新版本：

angular.module("app", ["dndLists"]).controller("c1", function($scope)
  $scope.title ="drag and drop";
  
  $scope.lists = [ 
   
     id: 2, 
     name: "list2", 
     cards: [
         name: "card1",
         name: "card2",
         name: "card3",
         name: "card4", 
         name: "card5"
     ]
   ,
   
     id: 3,
     name: "list3", 
     cards: [
        name: "card1",
        name: "card2",
        name: "card3",
        name: "card4", 
        name: "card5"
    ]
  
  ];
    

	$scope.logEvent = function (indeksList, IndexCard) 
		$scope.movingItem = 
			indeksList: indeksList,
			IndexCard: IndexCard
		
	;
	
	$scope.dropCallback = function (index, item, external) 
	 return item;
	;
  
)

/* Styles go here */

  .tilt 
    transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
  


  .column 
    width: 170px;
    float: left;
    padding-bottom: 100px;
  
  .portlet 
    margin: 0 1em 1em 0;
    padding: 0.3em;
  
  .portlet-header 
    padding: 0.2em 0.3em;
    margin-bottom: 0.5em;
    position: relative;
  
  .portlet-toggle 
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -8px;
  
  .portlet-content 
    padding: 0.4em;
  
  .portlet-placeholder 
    border: 1px dotted black;
    margin: 0 1em 1em 0;
    height: 50px;
  





/* <BEGIN> For OS X */

*:focus 
	outline: none;


html 
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;


/* <END> For OS X */

body 
	font-family: 'Open Sans', sans-serif;
	background-color: #0375AB;


#wrapper, #topbar-inner 
	width: 95%;
	margin: 0 auto;


#topbar 
	background-color: #036492;


#topbar-inner 
	height: 42px;
	position: relative;


#topbar #nav 
	float: left;
	width: 25%;
	background: yellow;


#topbar #logo 
	width: 100%;
	padding-top: 8px;
	text-align: center;


#topbar #login 
	position: absolute;
	right: 0px;
	bottom: 10px;


#topbar #logo h1 
	margin: 0;
	display: inline;
	font-size: 24px;
	font-family: "Ubuntu", sans-serif;
	color: rgba(255, 255, 255, 0.3);


#topbar #logo h1:hover 
	color: rgba(255, 255, 255, 0.8);
	cursor: pointer;


#wrapper 
	margin-top: 30px;


#tasks 
	width: 260px;
	padding: 7px;
	background-color: #E2E4E6;
	border-radius: 3px;


#tasks h3 
	padding: 0;
	margin: 0px 0px 5px 0px;
	font-weight: 400;
	font-size: 14px;


#tasks ul 
	list-style-type: none;
	margin: 0;
	padding: 0;


#tasks li 
	padding: 5px 8px;
	margin-bottom: 4px;
	background-color: #fff;
	border-bottom: 1px #CCCCCC solid;
	border-radius: 3px;
	font-weight: 300;


#tasks li i 
	float: right;
	margin-top: 5px;


#tasks li i:hover 
	cursor: pointer;


#tasks li i.fa-trash-o 
	color: #888;
	font-size: 14px;


#tasks input[type=text] 
	margin: 0;
	width: 244px;
	padding: 5px 8px;
	border-width: 0;
	border-radius: 3px;
	box-shadow: none;


.btn-login 
	color: #fff;
	background-color: #448DAF;
	text-decoration: none;
	border-radius: 3px;
	padding: 5px 10px;

<script data-require="angular.js@1.6.5" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script data-require="angular-drag-and-drop-lists@1.2.0" data-semver="1.2.0" src="https://marceljuenemann.github.io/angular-drag-and-drop-lists/angular-drag-and-drop-lists.js"></script>

<body ng-app="app">
  <div ng-controller="c1">
    <ul style="list-style-type: none;">
      <li ng-repeat="item in lists">
        <div style="float: left; margin-left: 5px;">
          <div id="tasks">
            item.name

            <ul dnd-list="item.cards" dnd-drop="dropCallback($index, item, lists)">
              <li ng-repeat="card in item.cards" 
                  dnd-draggable="card" 
                  dnd-dragstart="logEvent($parent.$index, $index)"
                  dnd-moved="item.cards.splice($index, 1)"
                  dnd-selected="models.selected = item"
                  ng-class="'selected': models.selected === item" 
                  dnd-effect-allowed="move">
                card.name
              </li>
            </ul>
            <form ng-submit="addTask(item._id, newTask, $index)">
              <input type="text" ng-model="newTask" placeholder="add a new task" required />
            </form>
          </div>
        </div>  
      </li>
    </ul>
</div>
</body>

你可以找到 Plunker 项目here。