一个简单的jQuery插件制作 学习过程及实例(2)

//drag the dBox
//this event contains four events(handle.mousedown,move,out,up)
function drag() {
var dx, dy, moveout;
var handle = $("#dBox").find("#d_head>#d_title").css('cursor', 'move');
handle.mousedown(function (e) {
//cal the distance between e and dBox
dx = e.clientX - parseInt($("#dBox").css("left"));
dy = e.clientY - parseInt($("#dBox").css("top"));
//bind mousemove event and mouseout event to the dBox
$("#dBox").mousemove(move).mouseout(out).css({ "opacity": opts.opacity });
handle.mouseup(up);
});
move = function (e) {
moveout = false;
win = $(window);
var x, y;
if (e.clientX - dx < 0) {
x = 0;
} else {
if (e.clientX - dx > (win.width() - $("#dBox").width())) {
x = win.width() - $("#dBox").width();
} else {
x = e.clientX - dx;
}
}
if (e.clientY - dy < 0) {
y = 0;
} else {
y = e.clientY - dy;
}
$("#dBox").css({
left: x,
top: y
});
}
out = function (e) {
moveout = true;
setTimeout(function () {
moveout && up(e);
}, 10);
}
up = function (e) {
$("#dBox").unbind("mousemove", move).unbind("mouseout", out).css("opacity", 1);
handle.unbind("mouseup", up);
}
}

3，dBoxRemove()：

复制代码 代码如下:

//close the dBox
function dBoxRemove() {
if ($("#dBox")) {
$("#dBox").stop().fadeOut(200, function () {
$("#dBox").remove();
if (opts.overlay) {
$("#d_bg").remove();
$("#d_iframebg").remove();
}
});
}
}

到这里，插件制作基本完成，不过loading这个东东没有加上去。。。
另外还发现在ie6中，弹出的iframe高度和宽度都少了点，还有就是有遮罩层时，移动的时候不顺畅
还有其它问题欢迎讨论！
在线演示地址
打包下载地址

您可能感兴趣的文章: