js 拖动事件（将拖动效果分开）
<!--以下代码是创建一个按钮及一个div，并且赋予拖动效果问题是：如何在拖动div时按钮保持原位不动，拖动按钮时div保持原位不动？--><bodyid="body">...
<!--
以下代码是创建一个 按钮 及 一个 div，并且赋予拖动效果
问题是：如何在拖动 div 时 按钮保持原位不动，拖动 按钮时 div 保持原位不动？
-->
<body id = "body">
<div style = "width:100;height:100;background:rgb(200,255,170);position:relative;" id = "div">
<input type = "button" id = "button" style = "position:relative;" value = "button"></input>
</div>
</body>
<script>
function $$(id)
{
return document.getElementById(id)
}
var div = $$("div");
var button = $$("button");
var ob = new Array;
ob[0] = button;
ob[1] = div;
function move(obj)
{
obj.onmousedown = function()
{
var pageX = event.clientX;
var pageY = event.clientY;
var offX = parseInt(this.style.left) || 0;
var offY = parseInt(this.style.top) || 0;
var offXL = pageX - offX;
var offYL = pageY - offY;
if (!document.onmousemove)
document.onmousemove = function()
{
obj.style.left = event.clientX - offXL;
obj.style.top = event.clientY - offYL;
}
}
document.onmouseup = function()
{
document.onmousemove = null;
}
}
var move_div = move;
var move_button = move;
move_div(div);
move_button(button);
</script> 展开
以下代码是创建一个 按钮 及 一个 div，并且赋予拖动效果
问题是：如何在拖动 div 时 按钮保持原位不动，拖动 按钮时 div 保持原位不动？
-->
<body id = "body">
<div style = "width:100;height:100;background:rgb(200,255,170);position:relative;" id = "div">
<input type = "button" id = "button" style = "position:relative;" value = "button"></input>
</div>
</body>
<script>
function $$(id)
{
return document.getElementById(id)
}
var div = $$("div");
var button = $$("button");
var ob = new Array;
ob[0] = button;
ob[1] = div;
function move(obj)
{
obj.onmousedown = function()
{
var pageX = event.clientX;
var pageY = event.clientY;
var offX = parseInt(this.style.left) || 0;
var offY = parseInt(this.style.top) || 0;
var offXL = pageX - offX;
var offYL = pageY - offY;
if (!document.onmousemove)
document.onmousemove = function()
{
obj.style.left = event.clientX - offXL;
obj.style.top = event.clientY - offYL;
}
}
document.onmouseup = function()
{
document.onmousemove = null;
}
}
var move_div = move;
var move_button = move;
move_div(div);
move_button(button);
</script> 展开
1个回答
展开全部
一般有拖动效果的标签都是绝对定位position: absolute，相对定位position:relative
是做不到随意拖动的。
是做不到随意拖动的。
追问
😒但可以运行，不是吗，你复制代码，用chrome运行一下，可以拖动到任意位置，你没理解我的问题
追答
你的两元素都嵌套了，还要互不影响。。。。
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
