要素をドラッグしたときにhtml要素がプッシュダウンされないようにするにはどうすればよいですか？

Question

私は、HTMLドラッグ&ドロップAPIを使って角度指示文を書いています。ディレクティブはうまく動作しますが、要素をドラッグするときに要素間に空きスペースが追加されます。例えば

： PFA Screenshot

私は、＃1の上に素子＃3の素子＃3をドラッグしようとしたとき、私は、4つのdivブロックを（添付ファイルを参照してください）持っているが側に押さなっています要素＃3の代わりに空きスペースが追加されています。以下は

は私のコードです：

[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); 
} 

widgets.css

`<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.html

あなたは私が間違っているつもりですどこ私に教えていただけますか？この問題に関する助けをいただければ幸いです。

ありがとうございます！

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; 
}