在最近的项目中需要用到个拖拽DIV的功能，使用jquery虽然很容易实现，但是存在边框问题，为此，在网上找了这个插件，感觉很不错，于是在这里跟各位分享下。
插件 Drap.js 源码：
jQuery.fn.extend({
Drap: function (opts) {
var _self = this, _this = $(this), posX = 0, posY = 0;
opts = jQuery.extend({
DrapMove: null,
IsLimit: false,
Callback: function () { }
}, opts || {});
_self.mousemove = function (e) {
e.stopPropagation();
if ($.browser.msie) { e = window.event; }
var x = e.clientX - posX;
var y = e.clientY - posY;
if (opts.IsLimit) {
if (x < 0) {
x = 0;
}
if (y < 0) {
y = 0;
}
if (x > ($(document).width() - _this.width() - 2)) {
x = ($(document).width() - _this.width() - 2);
}
if (y > ($(document).height() - _this.height() - 2)) {
y = ($(document).height() - _this.height() - 2);
}
}
_this.css("left", x + "px");
_this.css("top", y + "px");
//_this.find(opts.DrapMove).text("top:" + y + ",left:" + (x + _this.width()))
}
_this.find(opts.DrapMove).mousedown(function (e) {
e.stopPropagation();
if ($.browser.msie) { e = window.event; }
posX = e.clientX - parseInt(_this.offset().left);
posY = e.clientY - parseInt(_this.offset().top);
$(document).mousemove(function (ev) {
_self.mousemove(ev);
});
});
$(document).mouseup(function () {
$(document).unbind("mousemove");
opts.Callback();
});
_this.find(opts.DrapMove).css("cursor", "move");
}
});
HTML源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.thylx.net——DIV拖拽插件</title>
<script src="http://www.thylx.net/javascript/jquery.js" type="text/javascript"></script>
<script src="http://murongshuai.blog.163.com/drap.js" type="text/javascript"></script>
<script>
$(function () {
$("#show").Drap({ DrapMove: "#title", IsLimit: true, Callback: function () {}});;
});
</script>
</head>
<body>
<div id="show" style="position: absolute; width: 216px; height: 138px; background-color: skyblue;
border: solid 1px blue;">
<div id="title" style="background-color: Blue; height: 20px; color: #fff; font-size: 12px;
padding-top: 5px; padding-left: 10px;">
标题 <i id="close" style="float: right; margin-right: 10px">x</i></div>
内容
</div>
</body>
</html>
更多精彩内容：各种AI课程、技能课程、黑科技软件、网站小程序源码、副业小项目、PPT模板等精品素材、电商课程、推广引流课程等，尽在 天边资源网 。