Question

我是JS的新手，并尝试使用纯JS创建简单的界面，其中User可以动态添加元素并移动它们。我找到了创建元素和拖放元素的解决方案，这些元素完全分离。但是当我试图将它们联合起来时，drop function停止工作......

我做错了什么？

模板：

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

我的JS档案：

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

Answer 1

我改变了

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

到

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

它开始为我工作。这意味着最终用户必须按住鼠标按钮才能继续拖动，并且元素将立即放在鼠标按钮上。但我假设这是所需的功能，或者您是否希望只在第二次鼠标点击时才会发生丢弃？

拖动后无法删除元素

1 个答案: