Hoje vamos resolver alguns problemas no protótipo do último arrasto. Vamos ver quais são os problemas?
Anexou o código JavaScript da edição anterior para facilitar todos para ver o problema.
<script type = "text/javascript"> window.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || evento; disx = oEvent.clientX - odiv.OffSetleft; disy = oevent.clienty - odiv.offsetTop; odiv.onMousEMove = function (ev) {var oevent = ev || evento; odiv.style.left = oevent.clientx - disx+'px'; odiv.style.top = oevent.clienty - disy+'px'; }; odiv.onMouseUp = function () {odiv.onMouSeMove = null; odiv.onMouseUp = null; }; }; }; </script>1. Se meu mouse se mover mais rápido agora, você descobrirá que o mouse sai dessa div e a div não seguirá o mouse neste momento.
Então, por que esse problema ocorre?
O motivo é realmente muito simples. Adicionamos o evento MouseMove ao DIV; portanto, uma vez que o mouse se desvie da div, o Mousemove não será mais acionado neste momento.
Solução: o evento é carregado no documento, porque seu mouse ainda está na página, não importa o quê, o Mousemove será acionado, não importa o quê, então será rápido.
Em seguida, modificamos o código de acordo.
<script type = "text/javascript"> window.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || evento; disx = oEvent.clientX - odiv.OffSetleft; disy = oevent.clienty - odiv.offsetTop; // No evento, carregar document.onmouseMove = function (ev) {var oevent = ev || evento; odiv.style.left = oevent.clientx - disx+'px'; odiv.style.top = oevent.clienty - disy+'px'; }; odiv.onMouseUp = function () {document.onMouseMove = null; odiv.onMouseUp = null; }; }; }; </script>Então esse problema pode ser resolvido.
2. Vamos ver quais problemas ainda estão lá. Embora o problema de arrastar rapidamente tenha sido resolvido, quando movi o mouse para esta posição
Agora você pode ver claramente que o mouse não está na div. Se você levantar o mouse neste momento, poderá ver que ele se moverá depois de voltar. Este é outro bug!
De fato, essa pergunta é a mesma que a acima. Portanto, é muito simples de resolver, vamos adicionar mouseup ao documento, vamos experimentar
document.onMouseUp = function () {document.onMouseMove = null; document.onmouseup = null; };Dessa forma, se você mudar para a posição que agora, não haverá bug anterior e não haverá problema em se mover rapidamente. Tudo é normal.
3. Vamos dar uma olhada nos problemas de compatibilidade do navegador
De fato, existe um problema na versão inferior do navegador do Firefox
. Como isso aconteceu? Quando você arrasta a primeira vez, está certo. Ao arrastá -lo uma vez, pressione e segure -o e mova -o, você descobrirá que haverá uma sombra atrás dele. O que está acontecendo com isso?
De fato, o Firefox que estamos arrastando agora é buggy. E daí se adicionarmos algum conteúdo à div
Você descobrirá que não há problema agora.
Portanto, o bug do Firefox aparece apenas na div em vazio.
Solução:
Na verdade, é muito simples. Só precisamos bloquear o evento padrão do navegador e retornar false; em Onmousedown. Por que adicioná -lo ao OnMousedown?
Você pode pensar em qual evento o arrasto começa? Começa com Onmousedown. Quando o mouse é pressionado, o arrasto começa. Então você precisa carregar o OnMousedown.
De fato, apenas adicionou um retorno de frase falsa; bloqueou o bug do Firefox.
Dessa forma, não importa como você atrasar, não haverá problema.
Código anexado:
<script type = "text/javascript"> window.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || evento; disx = oEvent.clientX - odiv.OffSetleft; disy = oevent.clienty - odiv.offsetTop; // No evento, carregar document.onmouseMove = function (ev) {var oevent = ev || evento; odiv.style.left = oevent.clientx - disx+'px'; odiv.style.top = oevent.clienty - disy+'px'; }; document.onMouseUp = function () {document.onMouseMove = null; document.onmouseup = null; }; retornar falso; }; }; </script>O programa agora está completo, mas ainda existem alguns problemas com a experiência do usuário.
Por exemplo, se um usuário pode arrastar essa div para fora do navegador, como ele pode resolvê -lo?
Então estamos adicionando um julgamento. Isso é muito simples, se você sair da esquerda
, isso é diretamente igual a 0, e ele não pode sair da esquerda. Então o mesmo é verdade acima.
Então, como podemos nos impedir de sair da direita? ? Basta desenhar um desenho e deixar claro. De fato, podemos calculá -lo subtraindo a largura visual da página da div.
Então este é o chamado valor máximo. Basta julgar se a distância movida exceder esse valor máximo, é igual a esse valor máximo. Então o seguinte é o mesmo.
Anexe o código completo:
<script type = "text/javascript"> // arrastar e soltar div em vazio. Versão baixa do firefox tem bug window.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || evento; disx = oEvent.clientX - odiv.OffSetleft; disy = oevent.clienty - odiv.offsetTop; document.onMousEMove = function (ev) {var oevent = ev || evento; // Armazene a localização atual do div var odivleft = oEvent.clientX - disx; var odivtop = oevent.clienty - disy; // arraste para fora da esquerda se (odivleft <0) {odivleft = 0; } else if (odivleft> document.documentElement.clientWidth - odiv.offsetWidth) {odivleft = document.documentElement.clientWidth - odiv.offsetWidth; } if (odivtop <0) {Odivtop = 0; } else if (odivtop> document.documentElement.clientHeight - odiv.offsetHeight) {odivtop = document.documentElement.clientHeight - odiv.offsetHeight; } odiv.style.left = odivleft + 'px'; odiv.style.top = odivtop + 'px'; }; document.onMouseUp = function () {document.onMouseMove = null; document.onmouseup = null; }; retornar falso; // bloqueia o evento padrão e resolva o bug do Firefox}; }; </script>Então o arrasto está mais completo agora. O (∩_∩) o