Anyway to scroll page with mousewheel while using html5 drag and drop?

Viewed 360

I am using HTML5 drag and drop and I haven't been able to find any working example of scrolling with mouse-wheel while dragging an item.

Is there anyway to achieve this ?

Here's the code with a max-height container to replicate : 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]);
  }
})();
0 Answers
Related