1. คำนำ
วัตถุประสงค์ขององค์ประกอบการลากเมาส์คือการลากจุดเล็ก ๆ จำนวนมากในหน้าสำหรับการวางตำแหน่งคงที่จากนั้นคัดลอก HTML และวางไว้ในรหัสการพัฒนาของหน้า ฉันต้องใช้ jQuery.fn.draggable plug-in
2. แนวคิดการออกแบบ
ผูกปุ่มเมาส์บนองค์ประกอบการลากผูกเมาส์เพื่อเลื่อนในวัตถุเอกสารและเมาส์เด้งเหตุการณ์;
ทำไมไม่ผูกทั้งสามเหตุการณ์กับองค์ประกอบการลากนี้เป็นเพราะเมื่อเมาส์เคลื่อนที่เร็วเกินไปเมาส์จะเคลื่อนที่และตัวจัดการเหตุการณ์ป๊อปอัพจะไม่ทำงาน
การคัดลอกรหัสมีดังนี้:
$ target.bind ('mousedown', fn);
$ (เอกสาร)
. -bind ('Mousemove', FN)
. -bind ('Mouseup', fn);
3. รายละเอียดการใช้งานซอร์สโค้ด
มีหลายสิ่งที่ควรทราบในการใช้ซอร์สโค้ด:
1. ในเหตุการณ์การกดเมาส์เมื่อคลิกและลากองค์ประกอบข้อความพื้นที่อาจถูกเลือก
การคัดลอกรหัสมีดังนี้:
// ป้องกันข้อความระดับภูมิภาคจากการถูกเลือกสำหรับ Chrome Firefox IE9
E.preventDefault ();
// สำหรับ Firefox IE9 || น้อยกว่า IE9
Window.getSelection?
2. หากองค์ประกอบการลากเป็นภาพ (แท็ก IMG) เมาส์จะลากภาพเป็นระยะทางสั้น ๆ พรอมต์ต้องห้ามจะปรากฏขึ้นนั่นคือภาพไม่สามารถลากได้
นี่เป็นพฤติกรรมเริ่มต้นของเบราว์เซอร์ดังนั้นเพียงบล็อกพฤติกรรมเริ่มต้นของเบราว์เซอร์
การคัดลอกรหัสมีดังนี้:
E.preventDefault ();
3. คำถามเกี่ยวกับขอบเขต (การจัดการช่วงการลาก)
รหัสที่นำไปใช้ในตอนแรกมีดังนี้:
การคัดลอกรหัสมีดังนี้:
// x, y หมายถึงค่าด้านซ้ายและค่าสูงสุดที่จะตั้งค่าโดยองค์ประกอบการลาก LimitObj คือวัตถุช่วงพื้นที่ลากและพบปัญหาระหว่างการทดสอบ
// ในระหว่างกระบวนการลากบางครั้งการลากวัตถุไม่สามารถอยู่ใกล้กับขอบเขตได้โดยตรง
if (x> = limitobj._left && x <= limitobj._right) {
$ target.css ({ซ้าย: 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 ({ซ้าย: x + 'px', ด้านบน: 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 ({
-
* อัตโนมัติ: บล็อก Yuan Huazi YJH 2014/02/21
-
ลาก: ฟังก์ชั่น (ตัวเลือก) {
var dragstart, dragmove, dragend,
$ BUNTARYELEM, LimitObj;
ฟังก์ชั่น _initoptions () {
var noop = function () {}, defaultOptions;
defaultOptions = {// รายการการกำหนดค่าเริ่มต้น
Boundaryelem: 'Body' // Boundary Container
-
ตัวเลือก = $ .extend (defaultOptions, ตัวเลือก || {});
$ BUNTARYELEM = $ (ตัวเลือก boundaryElem);
DragStart = ตัวเลือก DDRAGSTART ||
dragmove = ตัวเลือก ddragmove ||
dragend = ตัวเลือก DDRAGEND ||
-
ฟังก์ชั่น _drag (e) {
var clientx, clienty, Offsetleft, Offsettop,
$ target = $ (นี่), self = this;
limitObj = {
_left: 0,
_top: 0,
_right: ($ bountaryelem.innerWidth () || $ (หน้าต่าง) .width ()) - $ target.outerwidth (),
_bottom: ($ bountaryelem.innerHeight () || $ (หน้าต่าง) .Height ()) - $ target.outerheight ()
-
// บันทึกตำแหน่งเมื่อกดเมาส์และตำแหน่งสัมพัทธ์ขององค์ประกอบการลาก
clientx = e.clientx;
clienty = e.clienty;
Offsetleft = this.offsetleft;
Offsettop = this.offSettop;
DragStart.Apply (ข้อโต้แย้งนี้);
$ (เอกสาร). -bind ('Mousemove', MoveHandle)
. -bind ('Mouseup', uphandle);
// การจัดการเหตุการณ์การเคลื่อนไหวของเมาส์
ฟังก์ชั่น MoveHandle (e) {
var x = e.clientx - clientx + Offsetleft;
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) {
$ (เอกสาร) .unbind ('Mousemove', MoveHandle);
dragend.apply (ตัวเอง, ข้อโต้แย้ง);
-
-
_initoptions ();
$ (นี่)
.CSS ({ตำแหน่ง: 'Absolute'})
.Each (ฟังก์ชั่น () {
$ (นี่). -bind ('mousedown', ฟังก์ชั่น (e) {
_drag.apply (นี่, [e]);
// ป้องกันข้อความระดับภูมิภาคจากการถูกเลือกสำหรับ Chrome Firefox IE9
E.preventDefault ();
// สำหรับ Firefox IE9 || น้อยกว่า IE9
Window.getSelection?
-
-
คืนสิ่งนี้;
-
-
การโทรอินสแตนซ์:
การคัดลอกรหัสมีดังนี้:
// เรียกอินสแตนซ์
(การทำงาน(){
$ ('. Drag-Elem'). Drag ({
Boundaryelem: '#Boundary',
DragStart: function () {
$ (นี่) .html ('<span> เตรียมที่จะลาก </span>'). css ({zindex: 2}) พี่น้อง (). css ({zindex: 1});
-
dragmove: function () {
var pos = $ (นี่) .position ();
$ (นี่) .html ('<span> drag (' + pos.left + ',' + pos.top + ') </span>');
-
Dragend: function () {
$ (นี่) .html ('<span> drag end </span>');
-
-
-