如何阻止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; 
}