Terkait: Draggable Tanpa jQuery UI
Membuat elemen HTML menjadi dapat digeser-geser ternyata jauh lebih gampang dibandingkan dengan apa yang Saya pikir selama ini. Fungsi di bawah ini murni memakai JavaScript biasa dan tidak memerlukan library apapun. Berbeda dengan plugin draggable buatan Saya yang dulu:
HTML
<div id="draggable-element" style="position:relative;">Drag me!</div>JavaScript
var selected = null, // Object of the element to be moved x_pos = 0, y_pos = 0, // Stores x & y coordinates of the mouse pointer x_elem = 0, y_elem = 0; // Stores top, left values (edge) of the element // Will be called when user starts dragging an element function _drag_init(elem) { selected = elem; // Store the object of the element which needs to be moved x_elem = x_pos - selected.offsetLeft; y_elem = y_pos - selected.offsetTop; } // Will be called when user dragging an element function _move_elem(e) { x_pos = document.all ? window.event.clientX : e.pageX; y_pos = document.all ? window.event.clientY : e.pageY; if (selected !== null) { selected.style.left = (x_pos - x_elem) + 'px'; selected.style.top = (y_pos - y_elem) + 'px'; } } // Destroy the object when we are done function _destroy() { selected = null; } // Bind the functions here... document.getElementById('draggable-element').onmousedown = function() { _drag_init(this); return false; }; document.onmousemove = _move_elem; document.onmouseup = _destroy;Demo
Referensi: DigiMantra - Drag an Element, Image, etc… Using JavaScript
Sumber https://www.dte.web.id/