O princípio de arrastar: de fato, a distância entre o mouse e o canto superior esquerdo permanece inalterado. Vejamos a foto abaixo. Este ponto vermelho é o mouse.
O arrasto de arrasto significa realmente calcular a posição de um objeto através da posição do mouse. É tão simples e voluntário. Então, como você encontra essa distância? ?
A diferença entre a posição do mouse e a posição do objeto é essa distância, certo? Em seguida, essa linha diagonal é composta de linhas horizontais e verticais.
Vamos ver como o programa é feito.
<div id = "div1"> </div>
De fato, o que ele mudou foi o topo esquerdo de uma div e então ele começou a se mover. Nesse caso, deve haver posicionamento absoluto, certo?
<style type = "text/css"> #div1 {width: 200px; Altura: 200px; Antecedentes: vermelho; Posição: Absoluto; } </style>Aqui estão algumas etapas: 1. Pressione o mouse 2. Levante o mouse 3. Mova o mouse
<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; // navegador compatível com disx = oevent.clientx - odiv.offsetleft; // A posição horizontal é a posição do mouse - a posição do div disy = oevent.clienty - odiv.OffSettop; }; odiv.onMousEMove = function (ev) {var oevent = ev || evento; odiv.style.left = oevent.clientx - disx+'px'; // Posição atual do mouse -disx odiv.style.top = oevent.clienty - disy+'px'; }; }; </script>Fale com a foto:
var odivleft = oEvent.clientX - disx; O diagrama é muito claro
O MouseUp não vamos dar uma olhada em qual é o efeito agora. .
Você encontrará um fenômeno muito interessante. Se eu não pressionar o mouse, vou me seguir. Por que isso? ? ?
Vamos dar uma olhada no mousemove: ninguém em JavaScript estipula que você deve pressionar o mouse antes de começar, certo? Independentemente de você pressionar o mouse ou não, esse mousemove está acontecendo o tempo todo, então o problema vem daqui. Antes de pressionar o mouse, não deve haver resposta quando o mouse se move nele. Você tem que pressioná -lo para reagir.
Portanto, esse mousemove não deve ser adicionado assim que for lançado, mas deve esperar até que o mouse seja pressionado e adicione mousemove para ver o código modificado.
A propósito, MouseUp é adicionado e seu papel é refletido neste momento. A função é odiv.onMouSeMove = null; Remova o evento de movimentação,
Caso contrário, quando o mouse for criado, o objeto ainda o seguirá. odiv.onMouseUp = null; Se não houver lixo, será inútil levantar o mouse.
Vamos dar uma olhada no código modificado:
<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; // navegador compatível com disx = oevent.clientx - odiv.offsetleft; // A posição horizontal é a posição do mouse - a posição do div disy = oevent.clienty - odiv.OffSettop; odiv.onMousEMove = function (ev) {var oevent = ev || evento; odiv.style.left = oevent.clientx - disx+'px'; // Posição atual do mouse -disx odiv.style.top = oevent.clienty - disy+'px'; }; odiv.onMouseUp = function () {odiv.onMouSeMove = null; odiv.onMouseUp = null; // sem lixo, seria inútil levantar o mouse}; }; }; </script>Agora, fizemos um arrasto simples e cair, é claro que ainda existem alguns pequenos problemas a serem resolvidos.
Mas não importa o quê, já temos um protótipo de arrastamento. Vamos resolver alguns bugs um por um na próxima edição.