HTML：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="CSS/dnd.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="JS/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="JS/dnd.js"></script>
<title>dnd</title>
<style>
#dndDiv{ width:200px; height:200px; position:absolute; left:300px; top:100px; background:yellow; cursor:move; border:30px solid #ddd; margin:100px; padding:30px;}
.moving{background:red;}
.img{width:100px; height:100px;}
</style>
</head><body>
<h1>Drag and Drop</h1>
<div id="dndDiv" class="div">
<img src="images/01.jpg" class="img">
</div>
</body></html>function dnd(layer){
this.layer = layer;
var _this=this;
this.layer.bind('mousedown',function(e){
_this.startMove(e);
e.preventDefault();//阻止浏览器默认行为 这里为去除火狐浏览器下默认的拖拽功能
//return false;
//alert(e.target)
})
}
dnd.prototype = {
startMove:function(start_e){var _this=this;
this.offset = {
x:start_e.clientX - this.layer.offset().left + $("html").scrollLeft(),
y:start_e.clientY-this.layer.offset().top + $("html").scrollTop()
}
this.moveFun = function(e){_this.move(e);}
this.stopFun = function(){
_this.stopMove();
}
$(document).bind("mousemove",this.moveFun)
$(document).bind("mouseup",this.stopFun)
},move: function(e){
var x= e.clientX - this.offset.x - parseInt(this.layer.css("margin-left"));
var y= e.clientY - this.offset.y - parseInt(this.layer.css("margin-top"));
this.moveto(x,y);
},moveto: function(x,y){
this.layer.css("left",x+"px");
this.layer.css("top",y+"px");
}, stopMove: function(){
$(document).unbind("mousemove",this.moveFun)
$(document).unbind("mouseup",this.stopFun)
}
} $(function(){
var dndDiv = $("#dndDiv")
var newDnd = new dnd(dndDiv);
})
IE下，当点击DIV里面的图片时，拖拽效果失效，mouseup事件没有被触发，不知道是什么原因......
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="CSS/dnd.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="JS/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="JS/dnd.js"></script>
<title>dnd</title>
<style>
#dndDiv{ width:200px; height:200px; position:absolute; left:300px; top:100px; background:yellow; cursor:move; border:30px solid #ddd; margin:100px; padding:30px;}
.moving{background:red;}
.img{width:100px; height:100px;}
</style>
</head><body>
<h1>Drag and Drop</h1>
<div id="dndDiv" class="div">
<img src="images/01.jpg" class="img">
</div>
</body></html>function dnd(layer){
this.layer = layer;
var _this=this;
this.layer.bind('mousedown',function(e){
_this.startMove(e);
e.preventDefault();//阻止浏览器默认行为 这里为去除火狐浏览器下默认的拖拽功能
//return false;
//alert(e.target)
})
}
dnd.prototype = {
startMove:function(start_e){var _this=this;
this.offset = {
x:start_e.clientX - this.layer.offset().left + $("html").scrollLeft(),
y:start_e.clientY-this.layer.offset().top + $("html").scrollTop()
}
this.moveFun = function(e){_this.move(e);}
this.stopFun = function(){
_this.stopMove();
}
$(document).bind("mousemove",this.moveFun)
$(document).bind("mouseup",this.stopFun)
},move: function(e){
var x= e.clientX - this.offset.x - parseInt(this.layer.css("margin-left"));
var y= e.clientY - this.offset.y - parseInt(this.layer.css("margin-top"));
this.moveto(x,y);
},moveto: function(x,y){
this.layer.css("left",x+"px");
this.layer.css("top",y+"px");
}, stopMove: function(){
$(document).unbind("mousemove",this.moveFun)
$(document).unbind("mouseup",this.stopFun)
}
} $(function(){
var dndDiv = $("#dndDiv")
var newDnd = new dnd(dndDiv);
})
IE下，当点击DIV里面的图片时，拖拽效果失效，mouseup事件没有被触发，不知道是什么原因......
很久以前写过一个，没仔细测试过。
<html>
<head>
<title>title</title>
</head>
<body>
<div id="range" style="width:800px; height:800px; border:1px solid #333;">
fsfdsfdsf
fdsfd
</div><div id="bb" style="width:200px; height:200px; background-color:blue;">
<div id="ss" style="height:20px; background-color:red;"></div>
<div><img src="x.png"></div>
</div>
<script type="text/javascript">
(function(window){
var document = window.document;
var Drag = function(activeDom,dragDom){
this.mousedownHandle = this.getMousedownHandle();
this.mousemoveHandle = this.getMousemoveHandle();
this.mouseupHandle = this.getMouseupHandle();
this.bind(activeDom,dragDom);
}
Drag.prototype = {
bind:function(activeDom,dragDom){
if(!activeDom)return;
dragDom = dragDom||activeDom;
dragDom.style.position = 'absolute';
activeDom.style.cursor = 'move';
this.activeDom = activeDom;
this.dragDom = dragDom;
return this;
},
setRange:function(dom){
this.range = dom;
},
start:function(){
this.listenEvent(this.activeDom,'mousedown',this.mousedownHandle);
return this;
},
stop:function(){
this.removeEventListen(this.activeDom,'mousedown',this.mousedownHandle);
this.activeDom.style.cursor = 'default';
return this;
},
getMousedownHandle:function(){
_this = this;
return function(e){
e = e || window.event;
_this.dx = e.clientX - _this.dragDom.offsetLeft;
_this.dy = e.clientY - _this.dragDom.offsetTop;
_this.listenEvent(document,'mousemove',_this.mousemoveHandle);
_this.listenEvent(document,'mouseup',_this.mouseupHandle);
_this.cloneNode = _this.cloneNode || _this.dragDom.cloneNode(true);
_this.cloneNode.style.opacity = '.5';
_this.cloneNode.style.filter = 'alpha(opacity=50)';
_this.cloneNode.style.left = e.clientX - _this.dx + 'px';
_this.cloneNode.style.top = e.clientY - _this.dy + 'px';
_this.cloneNode.style.zIndex = "999999";
document.body.appendChild(_this.cloneNode);
_this.preventDefault(e);
_this.onDragBegin && _this.onDragBegin.call(_this.dragDom);
}
},
getMousemoveHandle:function(){
_this = this;
return function(e){
e = e || window.event;
_this.setPosition(e.clientX - _this.dx,e.clientY - _this.dy);
_this.preventDefault(e);
}
},
getMouseupHandle:function(){
_this = this;
return function(e){
e = e || window.event;
_this.dragDom.style.left = _this.cloneNode.offsetLeft+'px';
_this.dragDom.style.top = _this.cloneNode.offsetTop+'px';
_this.removeEventListen(document,'mousemove',_this.mousemoveHandle);
_this.removeEventListen(document,'mouseup',_this.mouseupHandle);
document.body.removeChild(_this.cloneNode);
_this.onDragEnd && _this.onDragEnd.call(_this.dragDom);
}
},
setPosition:function(x,y){
var range;
if(range = _this.range){
if(x<range.offsetLeft)x=range.offsetLeft;
if(y<range.offsetTop)y=range.offsetTop;
if(x>range.offsetLeft+range.offsetWidth-_this.cloneNode.offsetWidth)x=range.offsetLeft+range.offsetWidth-_this.cloneNode.offsetWidth;
if(y>range.offsetTop+range.offsetHeight-_this.cloneNode.offsetHeight)y=range.offsetTop+range.offsetHeight-_this.cloneNode.offsetHeight;
}
_this.cloneNode.style.left = x + 'px';
_this.cloneNode.style.top = y + 'px';
},
listenEvent:function(dom,evtType,callback){
if(window.addEventListener){
dom.addEventListener(evtType,callback,false);
}else{
dom.attachEvent('on'.concat(evtType),callback);
}
},
removeEventListen:function(dom,evtType,callback){
if(window.removeEventListener){
dom.removeEventListener(evtType,callback,false);
}else{
dom.detachEvent('on'.concat(evtType),callback);
}
},
preventDefault:function(e){
if(e.stopPropagation){
e.stopPropagation();
e.preventDefault();
}else{
e.cancelBubble = true;
e.returnValue = false;
}
}
}
window.Drag = Drag;
})(window);
var drag = new Drag();
drag.bind(document.getElementById('bb'),document.getElementById('bb'));
drag.setRange(document.getElementById('range'));
drag.onDragBegin = function(){
//this.getElementsByTagName('div')[1].innerHTML = 'draging...';
}
drag.onDragEnd = function(){
//this.getElementsByTagName('div')[1].innerHTML = 'stop drag...';
}
drag.start();
// drag.stop();
</script>
</body>
</html>
楼上的哥。。我刚测试了一下我的代码ie6下报错了，是因为setRange里面的局部变量未声明。
至于图片，我在里面放了一张图片（QQ截图）。chrome下和ie6下都没有问题。其他浏览器没测。
在开会手头没有其他浏览器。