Question

我想有一系列可以在框架中拖动的方框。当他们触摸另一个盒子时，它会被推开 - 如果你愿意的话会被击退。

我甚至不知道从哪里开始使它们可以拖拽!!

Answer 1

为了扩展我的评论并向您展示可能的概念证明，我创建了一小段代码：

<强> HTML

$('#studentType option[value="upperLevel"]').attr('disabled','disabled');

<强> CSS

<div id="move-frame">
  <div id="obj-1" class="drag">
    <span class="top">T: 2</span>
    <span class="left">L: 2</span>
    <span class="bottom">B:</span>
    <span class="right">R:</span>
  </div>
  <div id="obj-2" class="no-drag">
    <span class="top">T: 125</span>
    <span class="left">L: 175</span>
  </div>
</div>

jQuery UI

#move-frame {
  border: 1px solid #000;
  margin: 20px;
  padding: 2px;
  width: 300px;
  height: 300px;
  position: relative;
}

.drag,
.no-drag {
  border: 0px solid #666;
  width: 75px;
  height: 75px;
}

.top,
.left,
.bottom,
.right {
  display: block;
  font-size: 85%;
  font-family: Arial;
  width: 100%;
  text-align: center;
}

#obj-1 {
  background: #6f6;
}

#obj-2 {
  background: #ccf;
  position: absolute;
  top: 125px;
  left: 175px;
}

有很多方法可以改进这一点。您可以看到它很容易拖动缓冲区，但如果缓慢移动，您可以用绿色框轻推蓝色框。您还可以看到一些间隙问题，例如，如果您慢慢将绿色框放在上面但不在同一个Y平面上，蓝色框仍然可以移动。

Javascript：创建可拖动的元素，将彼此推开

1 个答案: