Artikel ini memperkenalkan implementasi seret elemen dalam javascript asli.
Ide:
1. Pertama ubah atribut tata letak dari elemen yang diseret, kunci adalah "Posisi: Absolue";
2. Tangkap peristiwa tikus "mousedown", "mousemove", "mouseup";
3. Ketika "mousedown" dipicu, catat posisi relatif mouse saat ini di elemen, _x, _y;
4. Kemudian proses acara "Mousemove" dan pindahkan elemen dengan mengubah atribut atas dan kiri elemen;
5. Ketika waktu "mouseup" dipicu, berhenti menyeret.
Pada saat yang sama, enkapsulasi kompatibilitas kode dan browser harus dipertimbangkan. Kodenya adalah sebagai berikut:
<! Doctype html> <html> <head> <title> divable div </ title> <style type = "text/css"> body {margin: 0; Padding: 0; Latar Belakang-Color: #FFF; } #drag_div {width: 150px; Tinggi: 150px; padding: 10px; margin: 10px; Latar Belakang-Color: #66DD33; Kursor: Pindah; } </tyle> </head> </html> <body> <v id = "drag_div"> </div> </body> <script type = "text/javascript"> function drag () {this.initialize.apply (ini, argumen); } Drag.prototype = {// inisialisasi inisialisasi: fungsi (elemen, opsi) {this.element = this. $ (Elemen); // Objek diseret this._x = this._y = 0; // posisi mouse di elemen this._movedrag = this.bind (this, this.movedrag); this._stopdrag = this.bind (this, this.stopdrag); // atur parameter this.setOptions (opsi); // Atur objek "pegangan" ke "seret" dengan mouse (perhatikan perbedaan dari objek yang diseret) this.handle = this. $ (This.options.handle); // atur fungsi callback this.onstart = this.options.onstart; this.onmove = this.options.onmove; this.onstop = this.options.onstop; this.handle.style.cursor = "move"; this.changelayout (); // Daftarkan Acara Drag Mulai this.addhandler (this.handle, "mousedown", this.bind (this, this.startdrag)); }, // Ubah atribut tata letak dari objek yang diseret Changelayout: function () {this.element.style.top = this.element.offsettop + "px"; this.element.style.left = this.element.offsetleft + "px"; this.element.style.position = "absolute"; this.element.style.margin = "0"; }, startDrag: function (event) {var event = event || window.event; this._x = event.clientx - this.element.offsetleft; this._y = event.clienty - this.element.offsettop; this.addhandler (dokumen, "mousemove", this._movedrag); this.addhandler (dokumen, "mouseup", this._stopdrag); this.preventDefault (acara); this.handle.setCapture && this.handle.setCapture (); this.onstart (); }, movingRag: function (event) {var event = this.getEvent (event); var itop = event.clienty - this._y; var ileft = event.clientx - this._x; this.element.style.top = itop + "px"; this.element.style.left = ileft + "px"; this.onmove (); }, stopdrag: function () {this.removeHandler (dokumen, "mousemove", this._movedrag); this.removeHandler (dokumen, "mouseup", this._stopdrag); this.handle.releasecapture && this.handle.releasecapture (); this.onstop ()}, setOptions: function (options) {this.options = {handle: this.element, // objek acara onStart: function () {}, // calling function onmove: function () {}, // Calling function onStop: function () {} function function () {}, // function onStop: function () {} function function () {} {) {function {) {{{} // function onstop: function {{) {) {{{{) untuk (var p dalam opsi) {this.options [p] = opsi [p]; }}, $: function (id) {return typeof id === "string"? document.geteLementById (id): id; }, addhandler: function (element, eventType, handler) {if (element.addeventListener) {return element.addeventListener (eventType, handler, false); } else {return element.attachevent ("on"+eventType, handler); }}, lepas hapus: function (element, eventType, handler) {if (element.removeEventListener) {return element.removeEventListener (eventType, handler, false); } else {return element.detachevent ("on" + eventType, handler); }}, getEvent: function (event) {return event || window.event; }, preventDefault: function (event) {if (event.preventdefault) {event.preventDefault (); } else {event.returnValue = false; }}, bind: function (obj, handler) {return function () {return handler.apply (obj, argumen); }}}}; window.onload = function () {var drag_div = document.geteLementById ("drag_div"); var drag = drag baru (drag_div, {handle: drag_div}); } </script> </html>