1. Vorwort
Der Zweck des Ziehens von Maus ist das Ziehen von Elementen, die viele kleine Punkte auf eine Seite für die feste Positionierung ziehen und HTML kopieren und in den Entwicklungscode der Seite einfügen. Ich musste das Plug-In in JQuery.Fn.Draggable verwenden.
2. Designideen
Binden Sie die Maustaste an das Dragelement, binden Sie die Maus, um sich im Dokumentobjekt zu bewegen, und die Maus springt das Ereignis.
Warum nicht alle drei Ereignisse an das Drag-Element binden?
Die Codekopie lautet wie folgt:
$ target.bind ('MouseDown', FN);
$ (Dokument)
.bind ('Mousemove', fn)
.bind ('mausup', fn);
A. Quellcode -Implementierungsdetails
Bei der Implementierung des Quellcodes sind viele Dinge zu beachten:
1. Im Mausereignis kann beim Klicken und Ziehen des Elements der Bereich ausgewählt werden.
Die Codekopie lautet wie folgt:
// verhindern, dass regionaler Text für Chrome Firefox IE9 ausgewählt wird
E.PreventDefault ();
// für Firefox IE9 || weniger als IE9
window.getSelection?
2. Wenn das Dragelement ein Bild ist (IMG -Tag), zieht die Maus das Bild für eine kurze Entfernung, eine verbotene Eingabeaufforderung wird angezeigt, dh das Bild kann nicht gezogen werden,
Dies ist das Standardverhalten des Browsers. Blockieren Sie daher einfach das Standardverhalten des Browsers.
Die Codekopie lautet wie folgt:
E.PreventDefault ();
3. Fragen zu Grenzen (Handling Drag -Reichweite)
Der am Anfang implementierte Code lautet wie folgt:
Die Codekopie lautet wie folgt:
// x, y repräsentiert den linken und den oberen Wert, der durch das Dragelement festgelegt werden soll, LimitObj ist das Objekt der Dragbereichsbereich, und während des Tests wurde ein Problem gefunden.
// Während des Zoging -Vorgangs kann das Ziehen von Objekten manchmal nicht direkt an der Grenze liegen
if (x> = limitObj._left && x <= limitObj._right) {
$ target.css ({links: x + 'px'});
}
if (y> = limitObj._top && y <= limitObj._bottom) {
$ target.css ({top: y + 'px'});
}
Denken Sie weiter: Warum das obige Problem auftritt?
Daher muss der Code so verarbeitet werden:
Die Codekopie lautet wie folgt:
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 ({links: x + 'px', oben: y + 'px'});
Schließlich löste dieses Problem, aber Cloudgamer gab einen besseren Weg, um es zu schreiben:
Die Codekopie lautet wie folgt:
$ target.css ({{{
Links: math.max (math.min (x, limitObj._right), limitobj._left) + 'px',
Oben: Math.max (Math.min (y, limitObj._bottom), limitObj._top) + 'px'
});
Vollständiger Programmquellcode:
Die Codekopie lautet wie folgt:
$ .fn.extend ({{
/**
* Auto: Blog Yuan Huazi YJH 2014/02/21
*/
Drag: Funktion (Optionen) {
var dragstart, Dragmove, Dragend,
$ bloßeLem, limitObj;
Funktion _initopions () {
var noop = function () {}, Standardeinstellungen;
StandardOptions = {// Standardkonfigurationselement
Grenzarpur: 'Körper' // Grenzbehälter
};
options = $ .extend (Standardoptions, Optionen || {});
$ bloßElem = $ (options.boundaryElem);
Dragstart = Options.DRagstart ||
DragMove = Optionen.DRAGMOVE ||
Dragend = Optionen.DRAGEND || Noop;
}
Funktion _drag (e) {
var clientx, clienty, offsetleft, offsettop,
$ target = $ (this), self = this;
limitObj = {
_left: 0,,
_top: 0,
_Right: ($ bandaryElem.innnerWidth () || $ (Fenster) .Width ()) - $ target.outerWidth (),,
_bottom: ($ bloßeLem.innerHeight () || $ (Fenster) .Height ()) - $ target.outerHeight ()
};
// Notieren Sie die Position, wenn die Maus gedrückt wird und die relative Position des Dragelements
clientX = e.clientX;
clienty = e.clienty;
OffsetLeft = this.offsetLeft;
offsettop = this.offsettop;
Dragstart.Apply (this, Argumente);
$ (Dokument) .bind ('Mousemove', MoveHandle)
.bind ('mauseup', hochhandle);
// Mausbewegungsereignis Handhabung
Funktion MOVEHANDLE (E) {
var x = e.clientx - clientx + offsetLeft;
var y = e.clienty - clienty + offsettop;
$ target.css ({{{
Links: math.max (math.min (x, limitObj._right), limitobj._left) + 'px',
Oben: Math.max (Math.min (y, limitObj._bottom), limitObj._top) + 'px'
});
DragMove.Apply (Selbst, Argumente);
// Blockieren Sie das Standardverhalten des Browsers (die Maus schleppt das Bild für eine kurze Entfernung, eine verbotene Eingabeaufforderung wird angezeigt, dh das Bild kann nicht mehr gezogen werden).
E.PreventDefault ();
}
// Maus -Bounce -Ereignishandhabung
Funktion hochhandle (e) {
$ (Dokument) .unbind ('Mousemove', MoveHandle);
Dragend.Apply (Selbst, Argumente);
}
}
_InitOptions (); // Initialisieren Sie das Konfigurationsobjekt
$ (this)
.css ({Position: 'Absolute'})
.each (function () {
$ (this) .bind ('MouseDown', Funktion (e) {
_DRAG.Apply (this, [e]);
// verhindern, dass regionaler Text für Chrome Firefox IE9 ausgewählt wird
E.PreventDefault ();
// für Firefox IE9 || weniger als IE9
window.getSelection?
});
});
gib dies zurück;
}
});
Instanzanruf:
Die Codekopie lautet wie folgt:
// rufen Sie die Instanz an
(Funktion(){
$ ('. Drag-Elem'). Drag ({{
Grenzarpur: '#Boundary',
Dragstart: function () {
$ (this) .html ('<span> bereiten Sie sich auf den Drag </span>'). CSS ({Zindex: 2}). SIBLING (). CSS ({Zindex: 1}) vorbereiten;
},
DragMove: function () {
var pos = $ (this) .position ();
$ (this) .html ('<span> drag (' + pos.left + ',' + pos.top + ') </span>');
},
Dragend: function () {
$ (this) .html ('<span> Drag End </span>');
}
});
} ());