Question

我正在尝试创建这种情况：用户上传一些书名，所有这些书名都是原始插入的，并显示在一个包含所有上载书名的大div中。

为数据库中的每个用户创建一个div（我称之为：“用户div”）

用户登录后，他应该能够从主div抓取他认为合适的任何书名作为副本，并将其拖动到用户div之一。

我按照本指南学习了有关拖放的知识。 https://javascript.info/mouse-drag-and-drop

我的代码主要来自上面的链接，但是我做了一些改动，因此只能制作一个克隆。

对我来说，舞会代表着书名。目标代表用户div。

我的问题是如何更改代码，以便可以识别出将球拖到哪个目标。

最后，我应该如何拥有多个球？因为会有不止一个书名。

我的书名和用户div是使用PHP和MySQL创建的。为简单起见，我选择不包含此代码。

let currentDroppable = null;
var count = 1;
ball.onmousedown = function(event) {
  if (count < 2) {
    var div = document.getElementById('ball'),
      clone = div.cloneNode(true); // true means clone all childNodes and all event handlers
    clone.id = "some_id";
    document.body.appendChild(clone);

    let shiftX = event.clientX - ball.getBoundingClientRect().left;
    let shiftY = event.clientY - ball.getBoundingClientRect().top;

    ball.style.position = 'absolute';
    ball.style.zIndex = 1000;
    document.body.append(ball);

    moveAt(event.pageX, event.pageY);

    function moveAt(pageX, pageY) {
      ball.style.left = pageX - shiftX + 'px';
      ball.style.top = pageY - shiftY + 'px';
    }

    function onMouseMove(event) {
      moveAt(event.pageX, event.pageY);

      ball.hidden = true;
      let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
      ball.hidden = false;

      if (!elemBelow) return;

      let droppableBelow = elemBelow.closest('.droppable');
      if (currentDroppable != droppableBelow) {
        if (currentDroppable) { // null when we were not over a droppable before this event
          leaveDroppable(currentDroppable);
        }
        currentDroppable = droppableBelow;
        if (currentDroppable) { // null if we're not coming over a droppable now
          // (maybe just left the droppable)
          enterDroppable(currentDroppable);
        }
      }
    }

    document.addEventListener('mousemove', onMouseMove);

    ball.onmouseup = function() {
      count++;
      document.removeEventListener('mousemove', onMouseMove);
      ball.onmouseup = null;
    };

  };

  function enterDroppable(elem) {
    elem.style.background = 'pink';
    ball.style.background = 'blue';
  }

  function leaveDroppable(elesm) {
    elem.style.background = '';
  }

  ball.ondragstart = function() {
    return false;
  };

}

<p>Drag the ball.</p>
<img src="https://en.js.cx/clipart/soccer-gate.svg" id="gate" class="droppable">
<img src="https://en.js.cx/clipart/soccer-gate.svg" id="gate" class="droppable">
<img src="https://en.js.cx/clipart/soccer-gate.svg" id="gate" class="droppable">

<div class="ball" id="hoop">



  <img src="https://en.js.cx/clipart/ball.svg" id="ball">
</div>

具有多个可放置选项的可拖动克隆

0 个答案: