Question

我使用此directiv：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来移动列表中的项目。您可以按demo所示使用dnd-moved="item.cards.splice($index, 1)"。

签出代码的更新版本：

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。

在AngularJS移动卡中拖放Directiv

2 个答案: