本文给大家分享的是使用纯JS实现的简单的拖拽效果的插件，算是对自己javascript学习的一个小的检验，如果小伙伴们需要复杂的拖拽效果，还是考虑jQuery的draggable吧，更成熟一些。

前端开发的时候，有好多地方用到拖拽效果,当然 是个不错的选择,but 我是个打破砂锅问到底的人，抽点时间用js小小的实现了类似的插件，话不多说。

　first:　html和css

代码如下:

使用js实现的简单拖拽效果 三联

now,先把主要算法实现一下：

代码如下:

yeah,使用面向对象实现一下

代码如下:

js Draggle class:

代码如下:

function Drag(id) {

this.div = document.getElementById(id);

if (this.div) {

this.div.style.cursor = "move";

this.div.style.position = "absolute";

}

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 || event;

this.disX = oEvent.clientX - this.div.offsetLeft;

this.disY = oEvent.clientY - this.div.offsetTop;

}

Drag.prototype.setPosition = function (evt) {

var oEvent = evt || event;

var l = oEvent.clientX - this.disX;

var t = oEvent.clientY - this.disY;

if (l <= 0) {

l = 0;

}

else if (l >= document.documentElement.clientWidth - this.div.offsetWidth) {

l = document.documentElement.clientWidth - this.div.offsetWidth;

}

if (t <= 0) {

t = 0;

}

else 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;

}

at last：最终实现：

代码如下:

window.onload = function () {

new Drag("div1");

new Drag("div2");

}

效果如下:

以上所述就是本文的全部内容了，希望能对大家更加熟练的掌握javascript有所帮助。

更多信息请查看IT技术专栏