时间戳

首页 > 解决方案 > 将 div 拖放到屏幕上的任何位置，但 div 不应该相互重叠？

javascript - 将 div 拖放到屏幕上的任何位置，但 div 不应该相互重叠？

问题描述

我想将 div 拖放到屏幕上的任何位置，但 div 不应该相互靠近，如果有人将 div 放在其他地方，它应该放在下一个可能的空间？

演示链接

window.onload = function() {
    for(var i = 0; i < 3; i++){
        var newDiv = document.createElement('DIV');
        newDiv.setAttribute('class', 'dragDiv' + i);
        document.getElementById('container').appendChild(newDiv);
        draggable(newDiv);
    }
}

function draggable(el) {
      el.addEventListener('mousedown', function(e) {
      var offsetX = e.clientX - parseInt(window.getComputedStyle(this).left);
      var offsetY = e.clientY - parseInt(window.getComputedStyle(this).top);

      function mouseMoveHandler(e) {
        el.style.top = (e.clientY - offsetY) + 'px';
        el.style.left = (e.clientX - offsetX) + 'px';
      }

      function reset() {
        window.removeEventListener('mousemove', mouseMoveHandler);
        window.removeEventListener('mouseup', reset);
      }

      window.addEventListener('mousemove', mouseMoveHandler);
      window.addEventListener('mouseup', reset);
    });
}

标签： javascript

解决方案

我做了答案，现在工作正常。**注意：问题是，我正在循环拖放，所以在这种情况下，我无法检查这个 div 放置位置是否在其他位置，因为这是重叠的，然后我通过HTML5 拖放功能，在拖放功能中，我检查是否有任何 div 为空，不要让任何东西掉入其中。（因此，如果里面没有任何东西，它会粘在外面并且不会重叠）。

function allowDrop(ev) {
    ev.preventDefault();
  }
  
  function drag(ev) {
      ev.dataTransfer.setData("application/json", JSON.stringify([ev.target.id,(ev.offsetX || ev.clientX - ev.target.offset.left),(ev.offsetY || ev.clientY - ev.target.offset.top)]));
  }
  
  function drop(ev) {
      ev.preventDefault();
      if (!ev.target.children.length == "") {
        var data = JSON.parse(ev.dataTransfer.getData("application/json"));

        var targetDiv = ev.target.appendChild(document.getElementById(data[0]))
        targetDiv.style.left = ev.clientX - data[1] + 'px';
        targetDiv.style.top = ev.clientY - data[2] + 'px';
        return false;
      }
  }
#div1, #div2 {width:100%;height:100vh;padding:10px;border:1px solid #aaaaaa;position: relative;}
  #drag1, 
  #drag2 {width:50px;height:50px;padding:10px;border:1px solid #000;background-color: #f00; position: absolute;display: inline-block;}
  #drag2:nth-child(2){left: 100px;}
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <div id="drag1" draggable="true" ondragstart="drag(event)"></div>
    <div id="drag2" draggable="true" ondragstart="drag(event)"></div>
  </div>

推荐阅读