javascript - 无论如何在使用html5拖放时用鼠标滚轮滚动页面？

Question

我正在使用HTML5 拖放，但我无法找到任何在拖动项目时使用鼠标滚轮滚动的工作示例。

有没有办法做到这一点？

这是带有要复制的最大高度容器的代码：https ://jsfiddle.net/5b09qpnu/

(function() {
  var dndHandler = {
    draggedElement: null,

    applyDragEvents: function(element) {
      element.draggable = true;

      var dndHandler = this;

      element.addEventListener("dragstart", function(e) {
        dndHandler.draggedElement = e.target;
        e.dataTransfer.setData("text/plain", "");
      });
    },

    applyDropEvents: function(dropper) {
      dropper.addEventListener("dragover", function(e) {
        e.preventDefault();
      });

      var dndHandler = this;

      dropper.addEventListener("drop", function(e) {
        var target = e.target,
          draggedElement = dndHandler.draggedElement,
          clonedElement = draggedElement.cloneNode(true);

        while (target.className.indexOf("dropper") == -1) {
          // Cette boucle permet de remonter jusqu'à la zone de drop parente
          target = target.parentNode;
        }

        target.className = "dropper"; // Application du style par défaut

        clonedElement = target.appendChild(clonedElement); // Ajout de l'élément cloné à la zone de drop actuelle
        dndHandler.applyDragEvents(clonedElement); // Nouvelle application des événements qui ont été perdus lors du cloneNode()

        draggedElement.parentNode.removeChild(draggedElement); // Suppression de l'élément d'origine
      });
    }
  };

  var elements = document.querySelectorAll(".draggable"),
    elementsLen = elements.length;

  for (var i = 0; i < elementsLen; i++) {
    dndHandler.applyDragEvents(elements[i]);
  }

  var droppers = document.querySelectorAll(".dropper"),
    droppersLen = droppers.length;

  for (var i = 0; i < droppersLen; i++) {
    dndHandler.applyDropEvents(droppers[i]);
  }
})();

标签： javascripthtmlscrolldrag-and-dropmousewheel