Menyeret adalah hal yang sangat keren. Anda mengklik objek, menahan mouse, memindahkan mouse ke area lain, dan melepaskan tombol mouse untuk menempatkan objek di sini.
Ini kasus sederhana:
Bagian HTML: Perhatikan bahwa elemen seret harus ditentukan secara mutlak, yaitu posisi = absolut;
Salinan kode adalah sebagai berikut: <div style = "Posisi: Absolute; Tinggi: 100px; Lebar: 100px; latar belakang: merah"> </div>
<skrip src = "dome.js"> </script>
JS Part (Dome.js):
var eventutil = {// Dapatkan acara dan target getEvent: function (event) {return event? Acara: Window.event; }, getTarget: function (event) {return event.target || event.srcelement; }, // Tambahkan Listen Event AddEvent: Function (Element, Type, Handler) {if (element.addeventListener) {element.addeventListener (type, handler, false); } else if (element.attachevent) {element.attachevent ("on" + type, handler); }}, // Log Out Event Listening Delevent: Function (Element, Type, Handler) {if (element.removeEventListener) {element.removeEventListener (type, handler, false); } else if (element.detachevent) {element.detachevent ("on" + type, handler); }}} var dragDrop = function () {// flag untuk menentukan apakah elemen DOM sedang diseret var dragging = null; // Perbedaan antara sudut kiri atas elemen DOM dan pointer mouse adalah diffx = 0; berbeda = 0; function handleEvent (event) {event = eventutil.getEvent (event); var target = eventutil.getTarget (event); switch (event.type) {case "mousedown": // Tentukan apakah kelas elemen DOM berisi atribut yang dapat diseret if (target.classname.indexof ("draggable")> -1) {seretging = target; diffx = event.clientx - target.offsetleft; diffy = event.clienty - target.offsettop; } merusak; case "mousemove": if (seret! = null) {target.style.left = event.clientx - diffx + "px"; target.style.top = event.clienty - berbeda + "px"; } merusak; kasus "mouseup": seret = null; merusak; }} return {enable: function () {eventutil.addevent (dokumen, "mousedown", handleevent); Eventutil.addevent (dokumen, "mousemove", handleevent); Eventutil.addevent (dokumen, "mouseup", handleevent); }, disable: function () {eventutil.delevent (dokumen, "mousedown", handleevent); Eventutil.Delevent (dokumen, "Mousemove", HandleEvent); Eventutil.Delevent (dokumen, "MouseUp", HandleEvent); }}} (); Dragdrop.enable ();Apa yang perlu dijelaskan di sini adalah diffx dan berbeda, yang mewakili perbedaan antara sudut kiri atas elemen dan penunjuk mouse.
Diffx = x Koordinat mouse - offsetleft objek elemen
Diffy = y koordinat mouse - offsettop objek elemen
Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.