不能在拖放后再拖放元素

Can't drop element after the drag

本文关键字：拖放 元素 不能      更新时间：2023-09-26

我是JS的新手，试图用纯JS制作简单的界面，用户可以动态添加元素并移动它们。我找到了创建元素和拖放元素的解决方案，它们可以完美地分开工作。但是当我试图将它们结合起来时，drop函数停止工作了…

我做错了什么?

模板:

    <head>
        <title>Int Demo</title>
        <script src='js/script.js'></script>
        <style type="text/css">
            .wrapper {width: 300px; height: 200px; background: #A3A1A1;}
            .textblock {cursor: pointer; background: red;}
        </style>
    </head>
    <body>
        <div class="button" id="button">Add Textbox</div>
        <div class="wrapper" id="wrapper"></div>
    </body>
</html>

My JS file:

document.addEventListener("DOMContentLoaded", function() { init(); }, false);
function init() {
    button = document.getElementById('button');
    wrapper = document.getElementById('wrapper');
    button.addEventListener('click', btnClick, false);
    wrapper.ondblclick  = catchIt;
}
//add element
function btnClick() {
    wrapper.innerHTML += '<p class="draggable textblock">Text Here!</p>';
    sessionStorage.inputBoxes = wrapper;
    console.log(sessionStorage);
}
// Activate Drag'n'Drop
document.onmousedown = function(e) {
  var dragElement = e.target;
  if (!dragElement.classList.contains('draggable')) return;
  var coords, shiftX, shiftY;
  startDrag(e.clientX, e.clientY);
  document.onmousemove = function(e) {
    moveAt(e.clientX, e.clientY);
  };
  dragElement.onmouseup = function() {
    finishDrag();
  };
  function startDrag(clientX, clientY) {
    shiftX = clientX - dragElement.getBoundingClientRect().left;
    shiftY = clientY - dragElement.getBoundingClientRect().top;
    dragElement.style.position = 'fixed';
    document.body.appendChild(dragElement);
    moveAt(clientX, clientY);
  };
  function finishDrag() {
    dragElement.style.top = parseInt(dragElement.style.top) + pageYOffset + 'px';
    dragElement.style.position = 'absolute';
    document.onmousemove = null;
    dragElement.onmouseup = null;
  }
  function moveAt(clientX, clientY) {
    var newX = clientX - shiftX;
    var newY = clientY - shiftY;
    // bottom offset
    var newBottom = newY + dragElement.offsetHeight;
    if (newBottom > document.documentElement.clientHeight) {
      var docBottom = document.documentElement.getBoundingClientRect().bottom;
      var scrollY = Math.min(docBottom - newBottom, 10);

      if (scrollY < 0) scrollY = 0;
      window.scrollBy(0, scrollY);
      newY = Math.min(newY, document.documentElement.clientHeight - dragElement.offsetHeight);
    }

    // top offset
    if (newY < 0) {
      var scrollY = Math.min(-newY, 10);
      if (scrollY < 0) scrollY = 0;
      window.scrollBy(0, -scrollY);
      newY = Math.max(newY, 0);
    }
    if (newX < 0) newX = 0;
    if (newX > document.documentElement.clientWidth - dragElement.offsetHeight) {
      newX = document.documentElement.clientWidth - dragElement.offsetHeight;
    }
    dragElement.style.left = newX + 'px';
    dragElement.style.top = newY + 'px';
  }
  return false;
}

我改变了

dragElement.onmouseup = function() {
    finishDrag();
};

到

document.onmouseup = function() {
    finishDrag();
};

，它开始为我工作。这确实意味着最终用户必须按住鼠标按钮才能继续拖动，并且元素将立即被放置在鼠标按钮上。但我假设这是你想要的功能，或者你想要在第二次点击鼠标时才放东西?

相关文章：