拖放排序NG-重复

Question

这是我的html：

<div ng-repeat="activity in activities"> 
    <button id="{{activity.id}}" activity=activity draggable> 
    {{activity.name}} 
    </button> 
</div> 

<div droppable handle="handleDrop(activity)"> 
    <div ng-repeat="activity in getAll()"> 
    <button> 
     {{activity.name}} 
    </button> 
    </div> 
</div> 

正如你看到的，我有两个指令，拖动和投掷的。可拖动指令通过dataTransfer将活动数据发送到可放置指令。在事件'drop'上，数据（活动JSON）被添加到控制器，getAll（）返回所有被放弃的活动。现在，这工作。但是我无法改变这些活动的顺序，因为放置只会将活动推到列表中。如果我希望能够在两项活动之间进行一项活动，或者重新排列它们，我该怎么办？

编辑：

app.directive('droppable', function() { 
    return { 
     scope: { 
      handle: '&' 
     }, 
     link: function (scope, element) { 

      element.on('dragover', function (e) { 
       e.preventDefault(); 
      }); 

      element.on('drop', function (e) { 
       e.preventDefault(); 
       var activity = JSON.parse(e.originalEvent.dataTransfer.getData("text")); 
       scope.handle({activity: activity}); 
       scope.$apply(); 

      }); 
     } 
    }; 
}); 

app.directive('draggable', function() { 

    return { 
     scope: { 
      'activity' : '=' 
     }, 

     link: function (scope, element) { 
      var el = element[0]; 
      el.draggable = true; 

      el.addEventListener('dragstart', function (e) { 
       e.dataTransfer.setData("text", JSON.stringify(scope.activity)); 
      }, false); 
     } 
    } 
}); 

Answer 1

我找到了解决自己。我所做的就是把它添加到HTML拖动元素：

data-index="{{$index}}"

然后，在dragenter事件可拖动的指令，我说：

if(e.target.hasAttribute('draggable')) { 
    e.target.classList.add('insert'); 
} 

凡insert类增加了一些造型以显示用户即将在两个元素之间落下。并在drop事件中，我补充道：

var i = e.target.getAttribute('data-index'); 
if (i !== null) { 
    scope.handle({activity: activity, index: i}); 
} else { 
    scope.handle({activity: activity}); 
} 
scope.$apply(); 

这解决了它对我来说。也许它可能对某人有用。