1. مقدمة
الغرض من عناصر سحب الماوس هو سحب العديد من النقاط الصغيرة على صفحة لتحديد المواقع الثابتة ، ثم نسخ HTML والصقها في رمز تطوير الصفحة. اضطررت إلى استخدام المكون الإضافي jQuery.fn.draggge.
2. تصميم الأفكار
ربط زر الماوس على عنصر السحب ، وربط الماوس للتحرك في كائن المستند ، والماوس يرتد الحدث ؛
لماذا لا تربط جميع الأحداث الثلاثة بعنصر السحب؟
نسخة الكود كما يلي:
$ target.bind ('mousedown' ، fn) ؛
$ (وثيقة)
.bind ('mousemove' ، fn)
.bind ('mouseup' ، fn) ؛
3. تفاصيل تنفيذ رمز المصدر
هناك العديد من الأشياء التي يجب ملاحظتها في تنفيذ رمز المصدر:
1.
نسخة الكود كما يلي:
// منع النص الإقليمي من أجل Chrome Firefox IE9
E.PreventDefault () ؛
// Firefox IE9 || أقل من IE9
window.getSelection؟
2. إذا كان عنصر السحب عبارة
هذا هو السلوك الافتراضي للمتصفح ، لذلك فقط منع السلوك الافتراضي للمتصفح.
نسخة الكود كما يلي:
E.PreventDefault () ؛
3. أسئلة حول الحدود (نطاق السحب)
الرمز الذي تم تنفيذه في البداية هو كما يلي:
نسخة الكود كما يلي:
// x ، y يمثل القيمة اليسرى والأعلى التي سيتم تعيينها بواسطة عنصر السحب ، LimitObj هو كائن نطاق منطقة السحب ، وتم العثور على مشكلة أثناء الاختبار.
// أثناء عملية السحب ، لا يمكن أن تكون الكائنات السحب في بعض الأحيان قريبة مباشرة من الحدود
if (x> = limitobj._left && x <= limitobj._right) {
$ target.css ({left: x + 'px'}) ؛
}
if (y> = limitobj._top && y <= limitobj._bottom) {
$ target.css ({top: y + 'px'}) ؛
}
فكر في ذلك: لماذا تحدث المشكلة أعلاه؟
لذلك ، يجب معالجة الكود مثل هذا:
نسخة الكود كما يلي:
if (x <limitobj._left) {
x = limitobj._left ؛
}
if (x> limitobj._right) {
x = limitobj._right ؛
}
if (y <limitobj._top) {
y = limitobj._top ؛
}
if (y> limitobj._bottom) {
y = limitobj._bottom ؛
}
$ target.css ({left: x + 'px' ، top: y + 'px'}) ؛
أخيرًا حل هذه المشكلة ، لكن CloudGamer أعطى طريقة أفضل لكتابتها:
نسخة الكود كما يلي:
$ target.css ({
اليسار: Math.Max (Math.min (X ، LimitObj._Right) ، limitobj._left) + 'px' ،
أعلى: Math.Max (Math.min (Y ، LimitObj._bottom) ، limitobj._top) + 'px'
}) ؛
رمز مصدر البرنامج الكامل:
نسخة الكود كما يلي:
$ .fn.extend ({
/**
* Auto: Blog Yuan Huazi YJH 2014/02/21
*/
السحب: وظيفة (خيارات) {
var dragstart ، dragmove ، dragend ،
$ boundaryelem ، limitoBJ ؛
الدالة _initoptions () {
var noop = function () {} ، defaultOptions ؛
DefaultOptions = {// عنصر التكوين الافتراضي
BoundaryElem: "الجسم" // حاوية الحدود
} ؛
الخيارات = $ .extend (defaultOptions ، الخيارات || {}) ؛
$ boundaryelem = $ (Options.boundaryelem) ؛
DragStart = Options.DragStart ||
DragMove = Options.dragmove
Dragend = Options.dragend || noop ؛
}
دالة _drag (e) {
var clientx ، clienty ، offsetleft ، Offsettop ،
$ target = $ (this) ، self = this ؛
LimitObj = {
_LEFT: 0 ،
_top: 0 ،
_Right: ($ boundaryelem.innerwidth () || $ (window) .width ()) - $ target.outerwidth ()
-
} ؛
// سجل الموضع عند الضغط على الماوس والموضع النسبي لعنصر السحب
clientx = e.clientx ؛
clienty = e.clienty ؛
OffSetLeft = this.offSetLeft ؛
OffSettop = this.offsettop ؛
dragstart.apply (هذا ، الحجج) ؛
$ (وثيقة) .bind ('mousemove' ، MoveHandle)
.bind ('mouseup' ، uphandle) ؛
// معالجة أحداث حركة الماوس
وظيفة movehandle (e) {
var x =
var y = e.clienty - clienty + OffSettop ؛
$ target.css ({
اليسار: Math.Max (Math.min (X ، LimitObj._Right) ، limitobj._left) + 'px' ،
أعلى: Math.Max (Math.min (Y ، LimitObj._bottom) ، limitobj._top) + 'px'
}) ؛
dragmove.apply (الذات ، الحجج) ؛
// حظر السلوك الافتراضي للمتصفح (يسحب الماوس الصورة لمسافة قصيرة ، ستظهر موجه محظور ، أي أنه لا يمكن سحب الصورة بعد الآن)
E.PreventDefault () ؛
}
// معالجة أحداث ترتد الماوس
وظيفة uphandle (e) {
$ (document) .Unbind ('mousemove' ، MoveHandle) ؛
dragend.apply (الذات ، الحجج) ؛
}
}
_initoptions () ؛
$ (هذا)
.css ({الموضع: 'aboort'})
.
$ (this) .bind ('mousedown' ، function (e) {
_drag.apply (هذا ، [e]) ؛
// منع النص الإقليمي من أجل Chrome Firefox IE9
E.PreventDefault () ؛
// Firefox IE9 || أقل من IE9
window.getSelection؟
}) ؛
}) ؛
إرجاع هذا ؛
}
}) ؛
استدعاء مثيل:
نسخة الكود كما يلي:
// استدعاء المثيل
(وظيفة(){
$ ('. drag-elem'). السحب ({
BoundaryElem: '#boundary' ،
DragStart: Function () {
$ (this) .html ('<span> استعد لسحب </span>'). css ({zindex: 2}). الأشقاء ().
} ،
DragMove: Function () {
var pos = $ (this) .position () ؛
$ (this) .html ('<span> drag (' + pos.left + '،' + pos.top + ') </span>') ؛
} ،
Dragend: Function () {
$ (this) .html ('<span> drag end </span>') ؛
}
}) ؛
} ()) ؛