Durante o desenvolvimento do front-end, há muitos lugares onde são usados efeitos de arrasto e soltar. Obviamente, http://jqueryui.com/draggable/ é uma boa escolha, mas eu sou uma pessoa que quebra a caçarola e pergunta a verdade. Levei algum tempo para implementar plug-ins semelhantes com JS, então não vou dizer muito.
Primeiro: HTML e CSS
A cópia do código é a seguinte:
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<Title> </title>
<estilo>
* {
margem: 0;
preenchimento: 0;
}
#div1 {
Posição: Absoluto;
Largura: 100px;
Altura: 100px;
Cursor: Mova;
cor de fundo: vermelho;
}
</style>
</head>
<Body>
<div id = "div1">
</div>
</body>
</html>
Agora, primeiro implemente o algoritmo principal:
A cópia do código é a seguinte:
<Cript>
window.onload = function () {
// Obtenha a div que precisa ser arrastada
var div1 = document.getElementById ("div1");
// Adicione um evento de imprensa do mouse
div1.onMouseDown = function (EVT) {
var oevent = evt || evento;
// Obtenha a distância de pressionar o mouse para a div.
var dournax = oevent.clientX - div1.OffSetLeft;
var doursey = oEvent.clientX - div1.OffSettop;
// Adicione o tempo de deslizamento do documento
document.onMousEmove = function (EVT) {
var oevent = evt || evento;
// recalcula o valor superior esquerdo da div
var esquerdo = oEvent.ClientX - DOURSX;
var top = oEvent.clienty - a distância;
// deixado quando menor ou igual a zero, definido como zero para impedir a divindora de arrastar para fora do documento
if (esquerda <= 0) {
Esquerda = 0;
}
// Quando esquerda, excede o limite direito do documento, definido para o limite direito
caso contrário, se (esquerda> = document.documentElement.clientWidth - div1.offsetWidth) {
esquerda = document.documentElement.clientWidth - div1.OffSetWidth;
}
if (top <= 0) {
top = 0;
}
caso contrário, if (top> = document.documentElement.clientHeight - div1.offsetheight) {
top = document.documentElement.clientHeight - div1.offsetHeight;
}
// Atribua a div novamente
div1.style.top = top + "px";
div1.style.left = esquerda + "px";
}
// Adicione um evento de elevação do mouse
div1.onMouseUp = function () {
// Limpe o evento
document.onMousEmove = null;
div1.onMouseUp = null;
}
}
}
</script>
Sim, use a implementação orientada a objetos
A cópia do código é a seguinte:
<estilo>
* {
margem: 0;
preenchimento: 0;
}
#div1 {
Largura: 100px;
Altura: 100px;
cor de fundo: vermelho;
}
#div2 {
cor de fundo: amarelo;
Largura: 100px;
Altura: 100px;
}
</style>
<div id = "div1"> </div>
<div id = "div2"> </div>
JS Draggle Class:
A cópia do código é a seguinte:
função arrastar (id) {
this.div = document.getElementById (id);
if (this.div) {
this.div.style.cursor = "move";
this.div.style.position = "absoluto";
}
this.disx = 0;
this.disy = 0;
var _This = this;
this.div.onmousedown = function (evt) {
_This.getDistance (EVT);
document.onMousEmove = function (EVT) {
_This.SetPosition (EVT);
}
_this.div.onmouseup = function () {
_This.clearEvent ();
}
}
}
Drag.prototype.getDistance = function (EVT) {
var oevent = evt || evento;
this.disx = oevent.clientx - this.div.offsetleft;
this.disy = oevent.clienty - this.div.offsettop;
}
Drag.prototype.setPosition = function (EVT) {
var oevent = evt || evento;
var L = oEvent.ClientX - this.disx;
var t = oevent.clienty - this.disy;
if (l <= 0) {
l = 0;
}
caso contrário, if (l> = document.documentElement.clientWidth - this.div.offsetWidth) {
l = document.documentElement.clientWidth - this.div.offsetWidth;
}
if (t <= 0) {
t = 0;
}
caso contrário, if (t> = document.documentElement.clientHeight - this.div.offsetheight) {
t = document.documentElement.clientHeight - this.div.offSethEight;
}
this.div.style.left = l + "px";
this.div.style.top = t + "px";
}
Drag.prototype.clearEvent = function () {
this.div.onmouseup = null;
document.onMousEmove = null;
}
Finalmente: implementação final:
A cópia do código é a seguinte:
window.onload = function () {
novo arrasto ("div1");
novo arrasto ("div2");
}
Os efeitos são os seguintes:
O acima é tudo sobre este artigo. Espero que seja útil que todos dominem o JavaScript de maneira mais proficiente.