AngularJS移动卡片中的拖放指令

Question

我使用这个指令：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

Answer 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

Answer 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。