如何在拖动/调整其他元素时自动移动元素？

Question

如何在拖动/调整其他元素时自动移动元素？

我想移动div.duree，当它接近另一个div.duree时。 目前，我可以相互独立地拖动元素，但它们重叠。而且我不想叠加，如果它们应该重叠，我希望它会移动。

有办法吗？

的index.html

  <div class="parent">
    <div class="duree" draggable resizable></div> 
    <div class="duree" draggable resizable></div> 
  </div>

directive.js

angular.directive('resizable', function() {
  return {
    restrict: 'A',
    controller: function resizableCtrl($scope, $element){  
      $element.resizable({
         containment: "parent",
         grid: 25
      });
    }  
  }
});

angular.directive('draggable', function() {
  return {
    restrict: 'A',
    controller: function draggableCtrl($scope, $element){  
      $element.draggable({
        containment: "parent", 
        axis: "x", 
        grid: [ 25, 0 ] 
      });
    }  
  }
});

Answer 1

如果您正在使用拖放功能，则有几个关键点。

1. 拖动操作是可以取消的待处理操作。
2. 要移动元素，您需要更新DOM（可能是添加新元素）。

我假设您希望UX向用户显示一个实时视图，了解如果您放弃元素＆＃34;现在＆＃34;将会是什么样子。

要检测叠加层，我建议将所有相关元素 droppable 。当您检测到 dragenter 或 dragover 时，请更新DOM，但需要移动重叠元素。例如，您可以添加一个带有虚线轮廓的新div来表示待处理的性质，如果您在那里“＃34;”＃34;。

如果用户取消拖动，则需要撤消对DOM的临时更改。