1. Pendahuluan
Tujuan dari elemen seret mouse adalah untuk menyeret banyak titik kecil pada halaman untuk posisi tetap, dan kemudian menyalin HTML dan menempelkannya dalam kode pengembangan halaman ini adalah fungsi yang telah diimplementasikan berkali -kali. Saya harus menggunakan jQuery.fn.draggable plug-in.
2. Ide desain
Ikat tombol mouse pada elemen seret, ikat mouse untuk bergerak di objek dokumen, dan mouse memantul acara;
Mengapa tidak mengikat ketiga acara ke elemen seret?
Salinan kode adalah sebagai berikut:
$ target.bind ('mousedown', fn);
$ (dokumen)
.Bind ('Mousemove', FN)
.bind ('mouseup', fn);
3. Detail Implementasi Kode Sumber
Ada banyak hal yang perlu diperhatikan dalam mengimplementasikan kode sumber:
1. Pertama, dalam acara pers mouse, saat mengklik dan menyeret elemen, teks area dapat dipilih.
Salinan kode adalah sebagai berikut:
// Cegah teks regional yang dipilih untuk Chrome Firefox IE9
e.preventdefault ();
// untuk Firefox IE9 ||
window.getSelection?
2. Jika elemen seret adalah gambar (tag IMG), mouse menyeret gambar untuk jarak pendek, prompt terlarang akan muncul, yaitu, gambar tidak dapat diseret lagi.
Ini adalah perilaku default browser, jadi blokir saja perilaku default browser.
Salinan kode adalah sebagai berikut:
e.preventdefault ();
3. Pertanyaan tentang batas (menangani rentang seret)
Kode yang diimplementasikan di awal adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
// x, y mewakili nilai kiri dan atas yang akan ditetapkan oleh elemen seret, LimitObj adalah objek rentang area seret, dan masalah ditemukan selama pengujian.
// Selama proses seret, kadang -kadang objek seret tidak dapat langsung dekat dengan batas
if (x> = limitobj._left && x <= limitobj._right) {
$ target.css ({kiri: x + 'px'});
}
if (y> = limitobj._top && y <= limitobj._bottom) {
$ target.css ({top: y + 'px'});
}
Pikirkan lebih lanjut: mengapa masalah di atas terjadi?
Oleh karena itu, kode perlu diproses seperti ini:
Salinan kode adalah sebagai berikut:
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 ({kiri: x + 'px', atas: y + 'px'});
Akhirnya menyelesaikan masalah ini, tetapi CloudGamer memberi cara yang lebih baik untuk menulisnya:
Salinan kode adalah sebagai berikut:
$ target.css ({
Kiri: Math.max (Math.min (x, limitobj._right), limitobj._left) + 'px',
Top: Math.max (Math.min (Y, Limitobj._bottom), limitobj._top) + 'px'
});
Kode Sumber Program Lengkap:
Salinan kode adalah sebagai berikut:
$ .fn.extend ({
/**
* Auto: Blog Yuan Huazi YJH 2014/02/21
*/
seret: function (options) {
Var Dragstart, Dragmove, Dragend,
$ Boundaryelem, LimitObj;
fungsi _initoptions () {
var noop = function () {}, defaultOptions;
DefaultOptions = {// item konfigurasi default
Boundaryelem: 'Body' // Container Boundary
};
options = $ .ExtEnd (defaultOptions, option || {});
$ boundaryelem = $ (options.boundaryelem);
DragStart = Options.DragStart ||
dragmove = options.dragmove ||
dragend = options.dragend ||
}
fungsi _drag (e) {
var clientx, clienty, offsetleft, offsettop,
$ target = $ (ini), self = ini;
limitoBj = {
_Left: 0,
_top: 0,
_Right: ($ Boundaryelem.innerwidth () || $ (window) .width ()) - $ target.outerwidth (),
_bottom: ($ boundaryelem.innerheight () || $ (window) .height ()) - $ target.outerheight ()
};
// Catat posisi saat mouse ditekan dan posisi relatif dari elemen seret
clientx = e.clientx;
clienty = e.clienty;
offsetleft = this.offsetleft;
offsettop = this.offsettop;
dragStart.Amply (ini, argumen);
$ (dokumen) .bind ('mousemove', moveHandle)
.Bind ('MouseUp', Uphandle);
// Penanganan Acara Gerakan Mouse
fungsi moveHandle (e) {
var x = e.clientx - clientx + offsetleft;
var y = e.clienty - clienty + offsettop;
$ target.css ({
Kiri: Math.max (Math.min (x, limitobj._right), limitobj._left) + 'px',
Top: Math.max (Math.min (Y, Limitobj._bottom), limitobj._top) + 'px'
});
dragmove.apply (self, argumen);
// Blokir perilaku default browser (mouse menyeret gambar untuk jarak pendek, prompt terlarang akan muncul, yaitu, gambar tidak dapat diseret lagi)
e.preventdefault ();
}
// penanganan acara bouncing tikus
fungsi uphandle (e) {
$ (dokumen) .unbind ('mousemove', moveHandle);
dragend.Apply (self, argumen);
}
}
_InitOptions ();
$ (ini)
.css ({position: 'absolute'})
.each (function () {
$ (ini) .bind ('mousedown', function (e) {
_drag.Apply (ini, [e]);
// Cegah teks regional yang dipilih untuk Chrome Firefox IE9
e.preventdefault ();
// untuk Firefox IE9 ||
window.getSelection?
});
});
kembalikan ini;
}
});
Contoh Panggilan:
Salinan kode adalah sebagai berikut:
// panggil contohnya
(fungsi(){
$ ('. Drag-Elem'). Drag ({
Boundaryelem: '#boundary',
dragStart: function () {
$ (ini) .html ('<span> bersiap untuk menyeret </span>'). CSS ({Zindex: 2}). Siblings (). CSS ({Zindex: 1});
},
dragmove: function () {
var pos = $ (ini) .position ();
$ (ini) .html ('<span> drag (' + pos.left + ',' + pos.top + ') </span>');
},
dragend: function () {
$ (ini) .html ('<span> seret end </span>');
}
});
} ());