تقدم هذه المقالة تنفيذ Element Drag في JavaScript الأصلي.
الأفكار:
1. قم أولاً بتغيير سمات التصميم للعنصر الذي تم سحبه ، والمفتاح هو "الموضع: المطلق" ؛
2. التقاط أحداث الماوس "MuseDown" ، "Mousemove" ، "Mouseup" ؛
3. عندما يتم تشغيل "mousedown" ، سجل الموضع النسبي للماوس الحالي في العنصر ، _x ، _y ؛
4. ثم معالجة حدث "mousemove" ونقل العنصر عن طريق تغيير السمات العلوية واليسرى للعنصر ؛
5. عندما يتم تشغيل وقت "الماوس" ، توقف عن السحب.
في الوقت نفسه ، ينبغي النظر في تغليف الكود والتوافق مع المتصفح. الرمز كما يلي:
<! doctype html> <html> <head> <title> divable div </title> <style type = "text/css"> body {margin: 0 ؛ الحشو: 0 ؛ خلفية اللون: #fff ؛ } #drag_div {width: 150px ؛ الارتفاع: 150 بكسل ؛ الحشو: 10 بكسل ؛ الهامش: 10px ؛ خلفية اللون: #66dd33 ؛ المؤشر: تحرك. } </style> </head> </html> <body> <div id = "drag_div"> </viv> </body> <script type = "text/javaScript"> function drag () {this.initialize.apply (this ، enduments) ؛ } drag.prototype = {// تهيئة: الدالة (العنصر ، الخيارات) {this.element = this. $ (element) ؛ // الكائن يجري سحب هذا ._x = this._y = 0 ؛ // موضع الماوس في العنصر this._movedrag = this.bind (this ، this.movedrag) ؛ this._stopdrag = this.bind (this ، this.stopdrag) ؛ // قم بتعيين المعلمة this.setOptions (الخيارات) ؛ // اضبط كائن "المقبض" على "السحب" مع الماوس (لاحظ الفرق من الكائن الذي يتم سحبه) this.handle = this. $ (this.options.handle) ؛ // قم بتعيين وظيفة رد الاتصال this.onstart = this.options.onstart ؛ this.onmove = this.options.onmove ؛ this.onstop = this.options.onstop ؛ this.handle.style.cursor = "move" ؛ this.changelayout () ؛ . } ، // قم بتغيير سمة التخطيط لكائن dragged 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 (وثيقة ، "mousemove" ، this._movedrag) ؛ this.addhandler (وثيقة ، "mouseup" ، this._stopdrag) ؛ this.preventDefault (event) ؛ this.handle.setCapture && this.handle.setCapture () ؛ this.onstart () ؛ } ، quadrag: 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 (document ، "mousemove" ، this._movedrag) ؛ this.removeHandler (وثيقة ، "mouseup" ، this._stopdrag) ؛ this.handle.releasecapture && this.handle.releasecapture () ؛ this.onstop ()} ، setOptions: function (reports) {this.options = {handle: this.element ، // event object onStart: function () {} ، // calling function onMove: function () {} ، // calling onstop: function () {} // function onStop: function () {} لـ (var p في الخيارات) {this.Options [p] = Options [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) ؛ } آخر {return element.attachevent ("on"+eventType ، Handler) ؛ }} ، removeHandler: function (element ، eventType ، Handler) {if (element.removeeventListener) {return element.removeeventListener (eventType ، Handler ، false) ؛ } آخر {return element.detachevent ("on" + eventType ، Handler) ؛ }} ، getevent: function (event) {return event || window.event ؛ } ، PreventDefault: function (event) {if (event.preventDefault) {event.preventDefault () ؛ } آخر {event.returnvalue = false ؛ }} ، bind: function (obj ، handler) {return function () {return handler.apply (obj ، encility) ؛ }}}} ؛ window.onload = function () {var drag_div = document.getElementById ("drag_div") ؛ var drag = new drag (drag_div ، {handle: drag_div}) ؛ } </script> </html>