<script> document.onmousemove = mm; var isok = false; var bx = 0; var by = 0; var count = 0; var obj; function md(o){ obj = document.getElementById(o); obj.style.zIndex=++count; isok = true; bx = event.clientX; by = event.clientY; }
function mu(){ isok = false; obj.style.zIndex = 1; } function mm(){ if(isok){ var ex = event.clientX - bx; var ey = event.clientY - by; obj.style.pixelTop = obj.offsetTop + ey; obj.style.pixelLeft = obj.offsetLeft + ex; bx = event.clientX; by = event.clientY; } } </script>老早写的，只在ie可用，兼容性有待改善！
<script>
document.onmousemove = mm;
var isok = false;
var bx = 0;
var by = 0;
var count = 0;
var obj;
function md(o){
obj = document.getElementById(o);
obj.style.zIndex=++count;
isok = true;
bx = event.clientX;
by = event.clientY;
}
function mu(){
isok = false;
obj.style.zIndex = 1;
} function mm(){
if(isok){
var ex = event.clientX - bx;
var ey = event.clientY - by;
obj.style.pixelTop = obj.offsetTop + ey;
obj.style.pixelLeft = obj.offsetLeft + ex;
bx = event.clientX;
by = event.clientY;
}
}
</script>老早写的，只在ie可用，兼容性有待改善！
onmouseup="mu()" onmousedown="md('id')" 加载标签上的事件
var $=window.$p||jQuery;
jQuery.fn.extend({
Size: function() {
return {
w:this.width(),
h:this.height()
};
},
getDim: function(isAll) {
var o=this[0];
var rd= {
x:0,
y:0,
x1:0,
y1:0
};
do {
rd.x+=o.offsetLeft||0;
rd.y+=o.offsetTop||0;
o=o.offsetParent;
} while(o);
var size=this.Size();
rd.x1=rd.x+size.w;
rd.y1=rd.y+size.h;
if(isAll===true) {
return {
x:rd.x,
y:rd.y,
x1:rd.x1,
y1:rd.y1,
a: {
x:rd.x,
y:rd.y
},
b: {
x:rd.x1,
y:rd.y
},
c: {
x:rd.x1,
y:rd.y
},
d: {
x:rd.x1,
y:rd.y1
}
};
}
return rd;
},
dragable: function() {
var x, y;
var o = this[0];
x = this.getDim().x;
y = this.getDim().y;
var event = window.event||arguments.callee.caller.arguments[0];
var deltaX = event.clientX - x;
var deltaY = event.clientY - y;
var drag = true;
o.style.filter = "Alpha(Opacity=60)";
var size= {
x:this.width(),
y:this.height()
};
o.onmousemove = function() {
if (drag) {
o.style.left = (event.clientX - deltaX) + "px";
o.style.top = (event.clientY - deltaY) + "px";
// if (event.clientX - deltaX <= 0)
// o.style.left = 0 + "px";
// if (event.clientY - deltaY <= 0)
// o.style.top = 0 + "px";
// if (event.clientX - deltaX + o.offsetWidth >= size.x)
// o.style.left = (size.x - o.offsetWidth) + "px";
// if (event.clientY - deltaY + o.offsetHeight >= size.y)
// o.style.top = (size.y - o.offsetHeight) + "px";
o.setCapture();
}
}
o.onmouseup = function() {
o.style.filter = "Alpha(Opacity=100)";
drag = false;
o.releaseCapture();
}
}
});
})(jQuery);给个参考好了
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript拖拽</title>
<style type="text/css">
#content {
background-color:#999;
}
</style>
<script type="text/javascript">
var drag = false;
var eventX;
var eventY;
var divX;
var divY;
function test(){
var testDiv = document.getElementById("content");
testDiv.style.position = "relative";
testDiv.style.left = "0px";
testDiv.style.top = "0px";
testDiv.onmouseover = over;
testDiv.onmouseout = out;
testDiv.onmousedown = down;
testDiv.onmouseup = up;
testDiv.onmousemove = move;
}
function over(){
this.style.cursor = "pointer";
}
function out(){
this.style.cursor = "default";
}
function down(event){
drag = true;
event = event || window.event;
eventX = parseInt(event.clientX);
eventY = parseInt(event.clientY);
var testDiv = document.getElementById("content");
divX = parseInt(testDiv.style.left);
divY = parseInt(testDiv.style.top);
}
function up(event){
drag = false;
}
function move(event){
if(drag == false){
return false;
}
event = event || window.event;
var distX = parseInt(event.clientX)-eventX+divX;
var distY = parseInt(event.clientY)-eventY+divY;
var testDiv = document.getElementById("content");
testDiv.style.left = distX+"px";
testDiv.style.top = distY+"px";
}
</script>
</head><body onload="test(); return false;">
<div id="content">
<p>我是拖曳示例Div.</p>
<p>可以试验一下效果.</p>
</div>
</body>
</html>楼主可以参考这个系列：点击这里 ，写得很不错！
<body id="pid"></body>
<script>
function Drag(pid, cssText, className, divId){
var D = this;
var P = document.getElementById(pid);
var div = null;
var allowMove = false;
var width = 0;
var height = 0
var browserType = "ie";
var zIndex = 10;
if(navigator.userAgent.toLowerCase().indexOf("firefox") > 0){
browserType = "firefox";
}else if(navigator.userAgent.toLowerCase().indexOf("chrome") > 0){
browserType = "chrome";
}
if(window["zIndex"]){
zIndex = window["zIndex"];
}
var div = document.createElement("div");
if(cssText){
div.style.cssText = cssText;
}
if(className){
div.className = className;
}
if(divId){
div.id = divId;
}else{
div.id = "div" + parseInt(Math.random() * 10000) + "" + parseInt(Math.random() * 10000);
}
if(!div.style.left){
div.style.left = "0px";
}
if(!div.style.top){
div.style.top = "0px";
}
if(div.style.position != "absolute"){
div.style.position = "absolute";
}
if(!div.style.zIndex){
div.style.zIndex = ++zIndex;
}
if(browserType == "ie"){
div.style.filter = "alpha(opacity=0)";
}else{
div.style.opacity = "0";
}
div.onmousedown = function(){
if(browserType == "firefox"){
window.onmousemove = function(event){
e = event || window.event;
D.move(e);
}
window.onmouseup = function(event){
e = event || window.event;
allowMove = false;
}
}else{
P.onmousemove = function(event){
e = event || window.event;
D.move(e);
}
P.onmouseup = function(event){
e = event || window.event;
allowMove = false;
}
}
D.downUp(e, 1);
}
div.onmouseup = function(event){
e = event || window.event;
D.downUp(e, 0);
}
div.onmousemove = function(event){
e = event || window.event;
D.move(e);
} this.show = function(div){
function startShow(){
if(browserType == "ie"){
var opacity = parseInt(div.style.filter.match(/\d+/));
if(opacity >= 100){
clearInterval(siv);
}
div.style.filter = "alpha(opacity=" + (++opacity) + ")";
}else{
var opacity = parseFloat(div.style.opacity);
if(opacity >= 1){
clearInterval(siv);
}
div.style.opacity = opacity + 0.01;
}
}
var siv = setInterval(startShow, 10);
}
this.close = function(){
this.parentNode.parentNode.removeChild(this.parentNode);
}
div.show = function(){
var b = document.createElement("b");
b.innerHTML = "close";
b.style.cssText = "cursor:pointer;margin-left:110px;width:20px";
b.onclick = D.close;
this.appendChild(b); P.appendChild(this);
D.show(this);
}
div.show(); this.downUp = function(e, type){
var opacity = 0.5;
if(type){
allowMove = true;
if(window["zIndex"]){
zIndex = window["zIndex"];
}
div.style.zIndex = ++zIndex;
window["zIndex"] = zIndex;
}else{
allowMove = false;
opacity = 1;
}
width = e.clientX - parseInt(div.style.left);
height = e.clientY - parseInt(div.style.top);
if(browserType == "ie"){
div.style.filter = "alpha(opacity=" + (opacity * 100) + ")";
}else{
div.style.opacity = opacity;
}
} this.move = function(e){
if(!allowMove){
return false;
}
div.style.left = e.clientX - width + "px";
div.style.top = e.clientY - height + "px";
}
}function create(){
cssText = "-moz-user-select: none; -webkit-user-select: none; background: #D5D3EB; width: 150px; height: 100px; border: 0.0cm #CCCCFF solid; cursor: pointer; position: absolute; left: " + parseInt(Math.random() * 500) + "; top: " + parseInt(Math.random() * 500);
new Drag("pid", cssText);
}
</script>
<input type="button" value="创建" onclick="create()">