1. Prefacio
El propósito de los elementos de arrastre del mouse es arrastrar muchos puntos pequeños en una página para el posicionamiento fijo, y luego copiar HTML y pegarlo en el código de desarrollo de la página. Tuve que usar el complemento jQuery.fn.dagagable.
2. Ideas de diseño
Ate el botón del mouse en el elemento de arrastre, ata el mouse para moverte en el objeto de documento y el mouse rebota en el evento;
¿Por qué no vincular los tres eventos al elemento de arrastre?
La copia del código es la siguiente:
$ Target.bind ('Mousedown', fn);
$ (documento)
.Bind ('MouseMove', FN)
.bind ('mouseup', fn);
3. Detalles de implementación del código fuente
Hay muchas cosas a tener en cuenta al implementar el código fuente:
1. Primero, en el evento de prensa del mouse, al hacer clic y arrastrar el elemento, el texto del área puede seleccionarse.
La copia del código es la siguiente:
// evitar que el texto regional sea seleccionado para Chrome Firefox IE9
E.PreventDefault ();
// para Firefox IE9 ||
Window.getSelection?
2. Si el elemento de arrastre es una imagen (etiqueta img), el mouse arrastra la imagen por una distancia corta, aparecerá un mensaje prohibido, es decir, la imagen no se puede arrastrar,
Este es el comportamiento predeterminado del navegador, por lo que solo bloquea el comportamiento predeterminado del navegador.
La copia del código es la siguiente:
E.PreventDefault ();
3. Preguntas sobre los límites (manejo del rango de arrastre)
El código implementado al principio es el siguiente:
La copia del código es la siguiente:
// x, y representa el valor izquierdo y superior a establecer por el elemento de arrastre, LimitObj es el objeto de rango de área de arrastre y se encontró un problema durante la prueba.
// Durante el proceso de arrastre, a veces los objetos de arrastre no pueden estar directamente cerca del límite
if (x> = Limitobj._left && x <= Limitobj._right) {
$ Target.css ({izquierda: x + 'px'});
}
if (y> = Limitobj._Top && y <= Limitobj._bottom) {
$ Target.css ({top: y + 'px'});
}
Piensa más: ¿Por qué ocurre el problema anterior?
Por lo tanto, el código debe procesarse así:
La copia del código es la siguiente:
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 ({izquierda: x + 'px', top: y + 'px'});
Finalmente resolvió este problema, pero CloudGamer dio una mejor manera de escribirlo:
La copia del código es la siguiente:
$ Target.css ({
Izquierda: Math.max (Math.min (x, Limitobj._right), Limitobj._left) + 'Px',
Top: Math.max (Math.min (y, Limitobj._bottom), Limitobj._top) + 'Px'
});
Código fuente completo del programa:
La copia del código es la siguiente:
$ .fn.extend ({
/**
* Auto: Blog Yuan Huazi YJH 2014/02/21
*/
arrastrar: function (opciones) {
var dragstart, dragmove, dragend,
$ BoundaryElem, Limitobj;
función _initOptions () {
var noop = function () {}, defaultIptions;
DefaultOptions = {// elemento de configuración predeterminado
boundaryElem: 'cuerpo' // contenedor de límites
};
opciones = $ .extend (DefaultOptions, Opciones || {});
$ BoundaryElem = $ (Options.BoundaryElem);
dragStart = Options.dragStart ||
dragMove = options.dragMove ||
dragend = options.dragend ||
}
función _drag (e) {
var clientx, clienty, offsetleft, offsettop,
$ Target = $ (this), self = this;
Limitobj = {
_left: 0,
_TOP: 0,
_right: ($ boundaryElem.innerWidth () || $ (ventana) .Width ()) - $ Target.outerWidth (),
_bottom: ($ boundaryElem.innerHeight () || $ (ventana) .Height ()) - $ Target.outerHeight ()
};
// Registre la posición cuando se presiona el mouse y la posición relativa del elemento de arrastre
ClientX = e.clientx;
Clienty = e.clienty;
offsetleft = this.OffSetLeft;
offsettop = this.offsettop;
dragStart.apply (esto, argumentos);
$ (documento) .Bind ('MouseMove', MoveHandle)
.bind ('mouseup', uphandle);
// Manejo de eventos de movimiento del mouse
función MoveHandle (e) {
var x = e.clientx - clientx + offsetleft;
var y = e.clienty - clienty + offsettop;
$ Target.css ({
Izquierda: Math.max (Math.min (x, Limitobj._right), Limitobj._left) + 'Px',
Top: Math.max (Math.min (y, Limitobj._bottom), Limitobj._top) + 'Px'
});
dragmove.apply (yo mismo, argumentos);
// Bloquear el comportamiento predeterminado del navegador (el mouse arrastra la imagen por una corta distancia, aparecerá un mensaje prohibido, es decir, la imagen ya no se puede arrastrar)
E.PreventDefault ();
}
// Manejo de eventos de rebote del mouse
función UpHandle (e) {
$ (documento) .unbind ('mouseMove', MoveHandle);
dragend.apply (yo mismo, argumentos);
}
}
_initOptions ();
$ (esto)
.css ({posición: 'absoluto'})
.Each (function () {
$ (this) .bind ('Mousedown', function (e) {
_drag.apply (this, [e]);
// evitar que el texto regional sea seleccionado para Chrome Firefox IE9
E.PreventDefault ();
// para Firefox IE9 ||
Window.getSelection?
});
});
devolver esto;
}
});
Llamar a la instancia:
La copia del código es la siguiente:
// llame a la instancia
(función(){
$ ('. Drag-Elem'). Drag ({
BoundaryElem: '#Boundary',
dragStart: functer () {
$ (this) .html ('<span> Prepárese para arrastrar </span>'). CSS ({Zindex: 2}). Siblings (). Css ({Zindex: 1});
},
dragMove: function () {
var pos = $ (this) .position ();
$ (this) .html ('<span> drag (' + pos.left + ',' + pos.top + ') </span>');
},
dragend: function () {
$ (this) .html ('<span> drag end </span>');
}
});
} ());