Javascript:创建可相互推开的可拖动元素

Question

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

除了让它们可拖动之外，我什至不知道从哪里开始!!

Answer 1

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

https://jsfiddle.net/Twisty/L03rks0y/

HTML

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

CSS

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

jQuery UI

$(function() {
  var stuff = {};

  $(".no-drag").each(function(k, v) {
    var id = $(v).attr("id");
    var top = $(v).position().top;
    var left = $(v).position().left;
    var bottom = top + $(v).height();
    var right = left + $(v).width();
    stuff[k] = {
      id: id,
      top: top,
      left: left,
      bottom: bottom,
      right: right
    };
  });
  console.log(stuff);

  $("#obj-1").draggable({
    containment: '#move-frame',
    drag: function(e, ui) {
      var objW = ui.helper.width();
      var objH = ui.helper.height();
      var objP = ui.position;
      var buffer = 2;

      objP.right = objP.left + objW;
      objP.bottom = objP.top + objH;

      $(this).find(".top").html("T: " + objP.top);
      $(this).find(".left").html("L: " + objP.left);
      $(this).find(".bottom").html("B: " + objP.bottom);
      $(this).find(".right").html("R: " + objP.right);

      $.each(stuff, function(k, v) {
        if (objP.right == v.left - buffer) {
          var $el = $("#" + v.id);
          $el.css("left", v.left + buffer);
          v.left += buffer;
          $el.find(".top").html("T: " + $el.position().top);
          $el.find(".left").html("L: " + $el.position().left);
        }
        if (objP.bottom == v.top - buffer) {
          var $el = $("#" + v.id);
          $el.css("top", v.top + buffer);
          v.top += buffer;
          $el.find(".top").html("T: " + $el.position().top);
          $el.find(".left").html("L: " + $el.position().left);
        }
      });
    }
  });
});

有很多方法可以对此进行改进。您可以看到很容易通过缓冲区拖动，但如果移动缓慢，您会用绿色框来插入蓝色框。您还可以看到一些间隙问题，例如，如果您慢慢地将绿色框移过来，但不在同一 Y 平面上，则蓝色框仍然可以移动。