点鼠标mousedown的时候生成一个层（id:dragDiv），这里的实现不管该层dragDiv只是之前隐藏，还是重新生成都行，
此时，当我们还没mouseup的时候，也就是鼠标还是处于按住状态（注意：自始至终鼠标只点击过一次，并长按），之后，我们拖动鼠标，我想实现dragDiv这个层随鼠标拖动，不知道我描述的清不清晰，描述不清楚的话，大家只管提出来，麻烦大家给些建议，最好可以给些测试的代码，不管怎样非常感谢！
------解决方案--------------------
这个，这种东西MS网上很多吧。。。
------解决方案--------------------
。。。。Lz这是想干嘛？跟随鼠标的提示层？
------解决方案--------------------
其实是滑动条效果
------解决方案--------------------
你说div层随鼠标拖动，那当鼠标mouseup的时候呢？div层是自动消失，还是显示在当前鼠标的位置，还是显示在最初生成的位置呢？
------解决方案--------------------
- HTML code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
#myMessageDiv
{
position:absolute;
left:100px;
top:100px;
width: 500px;
height: 400px;
border: 2px solid #C0C0C0;
background-image: url(http://www.yindaoxian.com/uploads/allimg/090720/150451M45-7.jpg);
cursor:pointer;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="myMessageDiv">
</div>
</form>
</body>
</html>
<script type="text/javascript">
var moving = 0;
var _x, _y;
$("#myMessageDiv").mousedown(function (event) {
//debugger;
this.setCapture();
moving = 1; //开始移动标识
_x = event.clientX;
_y = event.clientY;
});
$("#myMessageDiv").mouseup(function () {
this.releaseCapture();
moving = 0;
});
$("#myMessageDiv").mousemove(function (event) {
if (moving == 1) {
var x = event.clientX;
var y = event.clientY;
//为窗体赋新位置
var X0 = parseInt($("#myMessageDiv").css("left"));
var Y0 = parseInt($("#myMessageDiv").css("top"));
$("#myMessageDiv").css("top", (Y0 + y - _y));
$("#myMessageDiv").css("left", (X0 + x - _x));
_x = x;
_y = y;
}
});
</script>
------解决方案--------------------
javascript拖拽
------解决方案--------------------
我靠~我的回答跑哪去了~我辛苦打的代码啊
------解决方案--------------------
刚没事写了一下，拖拽原理很简单，只是要封装好，留好API，这样就可以做出很多效果
写这么多，给点分吧，好久没上，都挣不到分了。
- HTML code
<!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>drag</title>
</head>
<body>
<script type="text/javascript">
(function(w) {
var drag = function(op) {
this.hander = op.hander || null;
this.target = op.target || op.hander || null;
this.start = op.start || null;
this.move = op.move || null;
this.end = op.end || null;
this.pos = null;
this.draging = false;
if(this.hander) {
addEvent(this.hander, 'mousedown', bind(this, this.dragStart));
addEvent(document, 'mousemove', bind(this, this.dragMove));
addEvent(document, 'mouseup', bind(this, this.dragEnd));
}
}
drag.prototype = {
dragStart: function(e) {
this.start && this.start.call(this, e);
this.pos = [e.pageX - parseInt(this.target.style.left), e.pageY - parseInt(this.target.style.top)];
this.draging = true;
e.stop();
},
dragMove: function(e) {
if(this.draging) {
this.target.style.left = e.pageX - this.pos[0] + 'px';
this.target.style.top = e.pageY - this.pos[1] + 'px';
this.move && this.move.call(this, e);
}
},
dragEnd: function(e) {
this.draging = false;
this.pos = null;
this.end && this.end.call(this, e);
}
};
function bind(o, fn) {
return function(e) {
var ev = e || window.event;
ev.pageX = e.pageX || ev.clientX;
ev.pageY = e.pageY || ev.clientY;
ev.stop = e.preventDefault? function() {
e.preventDefault();
e.stopPropagation();
} : function() {
ev.cancelBubble = true;
ev.returnValue = false;
}
fn.call(o, e);
}
}
function addEvent(dom, type, fn) {
if(document.addEventListener) {
dom.addEventListener(type, fn, false);
} else if(document.attachEvent) {
dom.attachEvent('on' + type, fn);
} else {
dom['on' + type] = fn;
}
}
function removeEvent(dom, type, fn) {
if(document.removeEventListener) {
dom.removeEventListener(type, fn, false);
} else if(document.detachEvent) {
dom.detachEvent('on' + type, fn);
} else {
dom['on' + type] = null;
}
}
w.drag = drag;
})(window);
</script>
<div id="box" style="width:400px;height:200px;background:#f0f;"></div>
<script type="text/javascript">
new drag({
hander: document.getElementById('box'),
start: function(e) {
var s = document.getElementById('test');
if(!s) {
s = document.createElement('div');
s.id = 'test';
s.style.position = 'absolute';
s.style.width = '200px';
s.style.height = '200px';
s.style.backgroundColor = '#f00';
document.body.appendChild(s);
this.target = s;
} else {
s.style.display = 'block';
}
s.style.left = e.pageX + 'px';
s.style.top = e.pageY + 'px';
},
end: function(e) {
this.target.style.display = 'none';
}
});
</script>
</body>
</html>