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

Question

我正在使用HTML Drag＆amp; amp;编写一个角度指令。 Drop API。该指令工作正常，但是当将元素拖过另一个元素时，它会在元素之间添加一个空格。

例如： PFA Screenshot

我有4个div块（请参考附件），当我尝试将元素＃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;
}