1. Préface
Le but des éléments de la souris est de faire glisser de nombreux petits points sur une page pour le positionnement fixe, puis de copier HTML et de le coller dans le code de développement de la page. J'ai dû utiliser le plug-in jQuery.fn.Draggable.
2. Idées de conception
Lignez le bouton de la souris sur l'élément glisser, liez la souris pour se déplacer dans l'objet document et la souris rebondit l'événement;
Pourquoi ne pas lier les trois événements à l'élément Drag?
La copie de code est la suivante:
$ Target.bind («Mousedown», fn);
$ (document)
.bind ('MouseMove', fn)
.bind ('Mouseup', fn);
3. Détails de l'implémentation du code source
Il y a beaucoup de choses à noter dans l'implémentation du code source:
1. Premièrement, dans l'événement de la souris, en cliquant et en faisant glisser l'élément, le texte de la zone peut être sélectionné.
La copie de code est la suivante:
// Empêche le texte régional d'être sélectionné pour Chrome Firefox IE9
E.PreventDefault ();
// pour Firefox IE9 ||
window.getSelection?
2. Si l'élément Drag est une image (balise IMG), la souris traîne l'image sur une courte distance, une invite interdite apparaît, c'est-à-dire que l'image ne peut pas être glissée,
Il s'agit du comportement par défaut du navigateur, donc bloquez simplement le comportement par défaut du navigateur.
La copie de code est la suivante:
E.PreventDefault ();
3. Questions sur les limites (gestion de la plage de traînée)
Le code implémenté au début est le suivant:
La copie de code est la suivante:
// x, y représente la valeur gauche et supérieure à définir par l'élément de glisser, LimitObj est l'objet Drag Area Range, et un problème a été trouvé lors des tests.
// Pendant le processus de traînée, les objets qui traînent parfois ne peuvent pas être directement proches de la limite
if (x> = limitobj._left && x <= limitobj._right) {
$ cible.css ({Left: x + 'px'});
}
if (y> = limitobj._top && y <= limitobj._bottom) {
$ cible.css ({top: y + 'px'});
}
Réfléchissez davantage: pourquoi le problème ci-dessus se produit?
Par conséquent, le code doit être traité comme ceci:
La copie de code est la suivante:
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;
}
$ cible.css ({Left: x + 'px', top: y + 'px'});
A finalement résolu ce problème, mais CloudGamer a donné une meilleure façon de l'écrire:
La copie de code est la suivante:
$ cible.css ({
gauche: math.max (math.min (x, limitobj._right), limitobj._left) + 'px',
en haut: math.max (math.min (y, limitobj._bottom), limitobj._top) + 'px'
});
Code source du programme complet:
La copie de code est la suivante:
$ .fn.extend ({
/ **
* Auto: Blog Yuan Huazi YJH 2014/02/21
* /
glisser: fonction (options) {
var dragstart, dragmove, dragend,
$ Boundaryelem, limiteBJ;
fonction _initOptions () {
var noop = function () {}, defaultOptions;
DefaultOptions = {// Élément de configuration par défaut
BoundaryElem: «corps» // conteneur limite
};
Options = $ .extend (defaultOptions, Options || {});
$ BoundaryElem = $ (options.boundaryelem);
dragstart = options.dragstart ||
dragmove = options.dragmove ||
dragend = options.Dragend ||
}
fonction _drag (e) {
var clientx, client, offsetleft, offsetTop,
$ cible = $ (this), self = this;
limitobj = {
_left: 0,
_top: 0,
_Right: ($ BoundaryElem.InnerWidth () || $ (Window) .Width ()) - $ cible.outerWidth (),
_bottom: ($ BoundaryElem.InnerHeight () || $ (Window) .Height ()) - $ cible.outerHeight ()
};
// Enregistrez la position lorsque la souris est pressée et la position relative de l'élément de traînée
clientx = e.clientx;
Clienty = e.clienty;
offSetLeft = this.offsetLeft;
offSetTop = this.offsetTop;
dragstart.apply (ceci, arguments);
$ (document) .bind ('MouseMove', MoveHandle)
.bind («sourisp», uphandle);
// Gestion des événements de mouvement de souris
fonction movehandle (e) {
var x = e.clientx - clientx + offsetLeft;
var y = e.clienty - Clienty + OffsetTop;
$ cible.css ({
gauche: math.max (math.min (x, limitobj._right), limitobj._left) + 'px',
en haut: math.max (math.min (y, limitobj._bottom), limitobj._top) + 'px'
});
dragmove.apply (self, arguments);
// Bloquez le comportement par défaut du navigateur (la souris traîne l'image sur une courte distance, une invite interdite apparaît, c'est-à-dire que l'image ne peut plus être traînée)
E.PreventDefault ();
}
// Gestion des événements de rebond de souris
fonction à la main (e) {
$ (document) .unbind ('MouseMove', MoveHandle);
Dragend.Apply (self, arguments);
}
}
_InitOptions ();
$ (ceci)
.css ({position: 'Absolute'})
.each (function () {
$ (this) .bind ('Mousedown', fonction (e) {
_Drag.Apply (this, [e]);
// Empêche le texte régional d'être sélectionné pour Chrome Firefox IE9
E.PreventDefault ();
// pour Firefox IE9 ||
window.getSelection?
});
});
retourner ceci;
}
});
Appel d'instance:
La copie de code est la suivante:
// appelle l'instance
(fonction(){
$ ('. Drag-Elem'). Drag ({{
BoundaryElem: «#boundary»,
dragstart: function () {
$ (this) .html ('<span> se prépare à glisser </span>'). CSS ({zindex: 2}). Sibllings (). CSS ({zindex: 1});
},
dragmove: function () {
var pos = $ (this) .position ();
$ (this) .html ('<span> glisser (' + pos.left + ',' + pos.top + ') </span>');
},
dragend: function () {
$ (this) .html ('<span> glisser end </span>');
}
});
} ());