JS生成可拖动层的有关问题，不会也帮顶一上，非常感谢
日期：2014-05-16 浏览次数：20441 次
JS生成可拖动层的问题，不会也帮顶一下，非常感谢
点鼠标mousedown的时候生成一个层（id:dragDiv），这里的实现不管该层dragDiv只是之前隐藏，还是重新生成都行，
此时，当我们还没mouseup的时候，也就是鼠标还是处于按住状态（注意：自始至终鼠标只点击过一次，并长按），之后，我们拖动鼠标，我想实现dragDiv这个层随鼠标拖动，不知道我描述的清不清晰，描述不清楚的话，大家只管提出来，麻烦大家给些建议，最好可以给些测试的代码，不管怎样非常感谢！
------解决方案--------------------
这个，这种东西MS网上很多吧。。。
------解决方案--------------------
。。。。Lz这是想干嘛？跟随鼠标的提示层？
------解决方案--------------------
其实是滑动条效果
------解决方案--------------------
你说div层随鼠标拖动，那当鼠标mouseup的时候呢？div层是自动消失，还是显示在当前鼠标的位置，还是显示在最初生成的位置呢？
------解决方案--------------------
点鼠标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.prototyp
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
