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]);
}
})();