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

Javascript: Create draggable elements that push each other out of the way

本文关键字：元素 创建 拖动 Javascript      更新时间：2023-09-26

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

我甚至不知道从哪里开始，除了让他们变得拖拉！！

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

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平面上，蓝色的盒子仍然可以移动。

相关文章：