如何阻止HTML元素在拖动元素时被按下？

Question

我正在写一个使用HTML的角度指令拖动&拖放API。该指令可以正常工作，但是当元素通过另一个元素拖动时，它会在元素之间添加一个空白区域。

例如： PFA Screenshot

我已经4个格块（请参阅附件），当我尝试拖动元件＃3在＃1，元素＃3是越来越被推向右侧和一个空的空间正在增加，而不是元素＃3。

下面是我的代码：

widgets.html

`<div class="row" widgets-options="dm.options" ng-model="dm.blocks"> 
     <div class="col-md-6 columns handle" ng-repeat="block in dm.blocks"> 
     <div class="well"> 
      <span>{{block.title}}</span> 
      <span>{{block.desc}}</span> 
     </div> 
     </div> 
    </div>` 

widgets.css

[draggable] { 
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    user-select: none; 
    /* Required to make elements draggable in old WebKit */ 
    -khtml-user-drag: element; 
    -webkit-user-drag: element; 
} 

.droppable.over, 
.widgets-options .over { 
    border: 2px dashed #999; 
} 

.widgets-options.handle { 
    cursor: pointer; 
} 

.droppable.moving, 
.widgets-options .moving { 
    border: 2px solid #777; 
    -webkit-transition: -webkit-transform 0.2s ease-out; 
    -moz-transition: -moz-transform 0.2s ease-out; 
    -o-transition: -o-transform 0.2s ease-out; 
    -ms-transition: -ms-transform 0.2s ease-out; 
    -webkit-transform: scale(0.9); 
    -moz-transform: scale(0.9); 
    -ms-transform: scale(0.9); 
    -o-transform: scale(0.9); 
} 

能否请你让我知道我要去哪里错了？任何有关这个问题的帮助将不胜感激。

提前致谢！

Answer 1

没关系我想通了。 border: 2px dashed #999;在我的情况下导致了这个问题，它推动了其他元素。我通过为所有元素添加透明边框来修复它。

.droppable.over, 
.widgets-options.handle.over { 
    border: 2px dashed #999; 
} 

.widgets-options.handle { 
    cursor: pointer; 
    border: 2px solid transparent; 
}