JavaScript Draggable
Tabel Konten
Terkait: Draggable Tanpa jQuery UI
Membuat elemen HTML menjadi bisa digeser-geser ternyata jauh lebih mudah dibandingkan dengan apa yang Saya pikir selama ini. Fungsi di bawah ini murni menggunakan 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
7 Komentar
abang ichal
move nya pke javascript.. klo css ada ngga ya
Taufik Nurrohman
Anonim
Kalau Dragablenya Seperti ini gimana Mas ,
Ada SEbuah Elemen Yang Menampung beberapa box yang akan didragable ,
kemudian kita dragable box entah dimana tempatnya ,
kemudian jika box dijatuhkan maka box akan menyessuaikan dan merapikan diriny masing"
dapat diistilahkan seperti mansory.
Taufik Nurrohman
⇒ http://jqueryui.com/sortable/
Unknown
html penutupnya salah tuh :)
Unknown
mas, notifikasi merah di atas, boleh tak pasang juga di blogku? dengan modifikasi tentunya.
dhanyn10
iya mas, mau pasang juga kemudian sy modifikasi spt kyk notifikasi who's among us