1. Prefácio
O objetivo dos elementos de arrasto do mouse é arrastar muitos pontos pequenos em uma página para o posicionamento fixo e, em seguida, copie o HTML e colá -lo no código de desenvolvimento da página. Eu tive que usar o plug-in jQuery.fn.draggable.
2. Ideias de design
Ligue o botão do mouse no elemento de arrasto, vincule o mouse para mover no objeto de documentos e o mouse salta o evento;
Por que não vincular os três eventos ao elemento de arrasto?
A cópia do código é a seguinte:
$ Target.Bind ('Mousedown', FN);
$ (documento)
.bind ('mousemove', fn)
.bind ('mouseup', fn);
3. Detalhes da implementação do código -fonte
Há muitas coisas a serem observadas na implementação do código -fonte:
1. Primeiro, no evento de imprensa do mouse, ao clicar e arrastar o elemento, o texto da área pode ser selecionado.
A cópia do código é a seguinte:
// impedem que o texto regional seja selecionado para o Chrome Firefox ie9
E.PreventDefault ();
// para Firefox IE9 || Menos que IE9
window.getSelection?
2. Se o elemento de arrasto for uma imagem (tag IMG), o mouse arrasta a imagem por uma curta distância, um prompt proibido aparecerá, ou seja, a imagem não pode ser arrastada,
Esse é o comportamento padrão do navegador; portanto, basta bloquear o comportamento padrão do navegador.
A cópia do código é a seguinte:
E.PreventDefault ();
3. Perguntas sobre os limites (manuseando o alcance de arrasto)
O código implementado no início é o seguinte:
A cópia do código é a seguinte:
// x, y representa o valor esquerdo e o máximo a ser definido pelo elemento de arrasto, o limiteBJ é o objeto da faixa da área de arrasto e um problema foi encontrado durante o teste.
// Durante o processo de arrasto, às vezes arrastar objetos não pode estar diretamente próximo do limite
if (x> = limiteobj._left && x <= limiteObj._right) {
$ Target.css ({esquerda: x + 'px'});
}
if (y> = limiteObj._top && y <= limiteobj._bottom) {
$ Target.css ({top: y + 'px'});
}
Pense mais: por que o problema acima ocorre?
Portanto, o código precisa ser processado assim:
A cópia do código é a seguinte:
if (x <limiteObj._left) {
x = limiteObj._left;
}
if (x> limiteObj._right) {
x = limiteObj._right;
}
if (y <limiteObj._top) {
y = limiteObj._top;
}
if (y> limiteobj._bottom) {
y = limiteObj._bottom;
}
$ Target.css ({esquerda: x + 'px', topo: y + 'px'});
Finalmente resolveu esse problema, mas Cloudgamer deu uma maneira melhor de escrevê -lo:
A cópia do código é a seguinte:
$ Target.css ({
Esquerda: Math.max (Math.min (x, limitebj._right), limitebj._left) + 'px',
TOP: Math.max (Math.min (y, limitebj._bottom), limitebj._top) + 'px'
});
Código fonte completo do programa:
A cópia do código é a seguinte:
$ .fn.extend ({
/**
* Auto: blog yuan huazi yjh 2014/02/21
*/
arrastar: function (opções) {
var dragstart, dragmove, dragnd,
$ limaryelem, limiteObj;
função _initoptions () {
var noop = function () {}, defaultOptions;
DefaultOptions = {// Item de configuração padrão
Boundaryelem: 'corpo' // contêiner de limite
};
opções = $ .Extend (DefaultOptions, Opções || {});
$ limaryelem = $ (options.bounderyelem);
dragstart = options.dragstart || noop,
dragMove = options.dragmove || Noop,
dragnd = options.DRAGEND || NOOP;
}
função _drag (e) {
var clientx, Cliente, Offsetleft, OffsetTop,
$ Target = $ (this), self = this;
limiteObj = {
_left: 0,
_top: 0,
_right: ($ limaryelem.innerwidth () || $ (janela) .Width ()) - $ Target.outerwidth (),
_bottom: ($ limaryelem.innerHeight () || $ (janela) .Height ()) - $ Target.outerHeight ()
};
// registra a posição quando o mouse é pressionado e a posição relativa do elemento de arrasto
clientx = e.clientX;
cliente = e.clienty;
offsetLeft = this.offsetLeft;
OFFSETTOP = this.offSettop;
dragstart.apply (isto, argumentos);
$ (documento) .bind ('mousemove', movehandle)
.bind ('mouseup', uphandle);
// Manipulação de eventos de movimento do mouse
função movehandle (e) {
var x = e.clientX - clientx + offsetLeft;
var y = e.clienty - cliente + offsettop;
$ Target.css ({
Esquerda: Math.max (Math.min (x, limitebj._right), limitebj._left) + 'px',
TOP: Math.max (Math.min (y, limitebj._bottom), limitebj._top) + 'px'
});
dragMove.Apply (self, argumentos);
// bloqueia o comportamento padrão do navegador (o mouse arrasta a imagem por uma curta distância, um prompt proibido aparecerá, ou seja, a imagem não pode ser mais arrastada)
E.PreventDefault ();
}
// Manuseio de eventos de salto de mouse
função uphandle (e) {
$ (documento) .unbind ('mousemove', movehandle);
dragnd.Apply (self, argumentos);
}
}
_initoptions ();
$ (isso)
.css ({position: 'absoluto'})
.ECH (function () {
$ (this) .bind ('mousedown', função (e) {
_drag.apply (this, [e]);
// impedem que o texto regional seja selecionado para o Chrome Firefox ie9
E.PreventDefault ();
// para Firefox IE9 || Menos que IE9
window.getSelection?
});
});
devolver isso;
}
});
Chamada de instância:
A cópia do código é a seguinte:
// Ligue para a instância
(função(){
$ ('. arrasto-elem'). arrasto ({
Boundaryelem: '#boundary',
dragstart: function () {
$ (this) .html ('<span> Prepare -se para arrastar </span>'). CSS ({zindex: 2}). irmãos (). CSS ({zindex: 1});
},
dragMove: function () {
var pos = $ (this) .Position ();
$ (this) .html ('<span> drag (' + pos.left + ',' + pos.top + ') </span>');
},
dragnd: function () {
$ (this) .html ('<span> arrastar extremidade </span>');
}
});
} ());