Не могу удалить элемент после перетаскивания

Я новичок в JS и пытаюсь создать простой интерфейс с чистым JS, где пользователь может динамически добавлять элементы и перемещать их. Я нашел решения для создания элементов и элементов drag'n'drop, которые отлично работают отдельно. Но когда я пытался их объединить, перестала работать функция 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>

Мой файл 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;
}
Источник

1 ответ

Решение

Я изменился

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

в

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

и это начало работать для меня. Это означает, что конечный пользователь должен будет удерживать кнопку мыши нажатой, чтобы продолжить перетаскивание, и что элемент будет немедленно помещен на кнопку мыши вверх. Но я предполагаю, что это желаемая функциональность, или вы хотите, чтобы падение происходило только при втором щелчке мыши?

Источник
Другие вопросы по тегам