javascript — перетащите div с помощью мыши, используя чистый JS

Перетащите div с помощью мыши, используя чистый JS

Я нашел отличное решение для этого, используя чистый JS.

 {amp}lt;!doctype html{amp}gt; {amp}lt;html{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta charset="UTF-8"{amp}gt; {amp}lt;link rel="stylesheet" href="style.css"{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;p{amp}gt;Drag the ball.{amp}lt;/p{amp}gt; {amp}lt;img src="https://en.js.cx/clipart/soccer-gate.svg" id="gate" class="droppable"{amp}gt; {amp}lt;img src="https://en.js.cx/clipart/ball.svg" id="ball"{amp}gt; {amp}lt;script{amp}gt; let currentDroppable = null; ball.onmousedown = function(event) { let shiftX = event.clientX - ball.getBoundingClientRect().left; let shiftY = event.clientY - ball.getBoundingClientRect().top; ball.style.position = 'absolute'; ball.style.zIndex = 1000; document.body.append(ball); moveAt(event.pageX, event.pageY); function moveAt(pageX, pageY) { ball.style.left = pageX - shiftX   'px'; ball.style.top = pageY - shiftY   'px'; } function onMouseMove(event) { moveAt(event.pageX, event.pageY); ball.hidden = true; let elemBelow = document.elementFromPoint(event.clientX, event.clientY); ball.hidden = false; if (!elemBelow) return; let droppableBelow = elemBelow.closest('.droppable'); if (currentDroppable != droppableBelow) { if (currentDroppable) { // null when we were not over a droppable before this event leaveDroppable(currentDroppable); } currentDroppable = droppableBelow; if (currentDroppable) { // null if we're not coming over a droppable now // (maybe just left the droppable) enterDroppable(currentDroppable); } } } document.addEventListener('mousemove', onMouseMove); ball.onmouseup = function() { document.removeEventListener('mousemove', onMouseMove); ball.onmouseup = null; }; }; function enterDroppable(elem) { elem.style.background = 'pink'; } function leaveDroppable(elem) { elem.style.background = ''; } ball.ondragstart = function() { return false; }; {amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 

Вы можете взять это, перепроектировать это / выяснить, что он делает, извлечь уроки и настроить его, чтобы он был тем, что вам нужно, или создать свой собственный на основе этих концепций.

Кредит на решение идет по адресу : https://javascript.info/mouse-drag-and-drop

Их плункер: https://plnkr.co/edit/VdbuAVBTO0X3sIR8o66m?p=preview

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector