使用传统的js和css怎样实现在一个Div的范围中拖拽另一个Div. 请高手指教。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用传统的js和css怎样实现在一个Div的范围中拖拽另一个Div. 请高手指教。相关的知识，希望对你有一定的参考价值。
参考技术A 以下直接可以运行。如果DIV在ID为area的div中，即可拖拽。我在Drag函数里做了对父div的判断。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标拖拽</title>
<script type="text/javascript">
function Drag(o, e)
if(o.parentElement!=document.getElementById('area')) return;
var e = window.event || e;
var _x = e.offsetX || e.layerX;
var _y = e.offsetY || e.layerY;
o.style.filter = 'Alpha(opacity=70)';
o.style.opacity = '0.7';
document.onmousemove = function(e)
var e = window.event || e;
o.style.left = e.clientX - _x + 'px';
o.style.top = e.clientY - _y + 'px';
o.style.cursor="move";
document.onmouseup = function(e)
document.onmousemove = null;
o.style.filter = o.style.opacity = '';
o.style.cursor="default";
</script>
</head>
<body>
<div id='area'>
<div onmousedown="Drag(this, event)" style="position:absolute;border:1px solid red;background:pink;width:400px;height:300px;"></div>
</div>
<div onmousedown="Drag(this, event)" style="position:absolute;left:500px;border:1px solid red;background:pink;width:400px;height:300px;"></div>
</body>
</html> 参考技术B 判断时改用 if($(objid).style.display="block")
不显示;
else
显示
你调用时实参始终是"show",怎么能实现转换呢? 参考技术C 这里有一个在div里面拖动另一个层的效果
可以参考一下
参考资料：http://www.blueidea.com/common/shoutbox/redir.asp?5=n&id=12284
本回答被提问者采纳js 怎样使div无法响应点击事件
js 怎样使div无法响应点击事件
根据div的id去决定某个div标签无法响应点击事件
如何写呢？
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引入jquery -->
<script src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<ul>
<li>第一个</li>
<li>第二个</li>
<li id="unbind">第三个</li>
</ul>
<script>
$(function()
//给li绑定点击事件
$("li").click(function(event)
//返回当前li的索引
alert($(this).index());
);
//给id为unbind的元素删除点击事件
$('#unbind').unbind("click");
)
</script>
</body>
</html>
unbind(type [,data]) //data是要移除的函数
$('#btn').unbind("click"); //移除click
$('#btn').unbind(); //移除所有
参考技术A你是指事件冒泡么，作为一个编程菜鸟，我平常用stopPropagation来阻止事件冒泡
例:
<div id="outer" onclick="alert('外面')">
//这里我没给div加样式，自己随便加个长和宽背景色就行了
<div id="inner" ></div>
</div>
<srtipt>
var inner = document.getElementById("inner");
inner.onclick = function(e)
alert("里面");
if(e && e.stopPropagation())
stopPropagation();
else
window.event.cancelBubble = true;
//ie不支持stopPropagation方法，需要用window.event.cancelBubble
</srtipt>
参考技术B 不知道你具体想实现什么效果？div只有你绑定了事件处理函数，才会有响应，如果不想响应，不给div绑定事件函数或者注销掉之前绑定的函数就可以了啊
如果你是这样的情况，比如布局是这样：
<div id="box">
<div id="div1"></div>
</div>
box 上有事件，但你不想在点击div1 时响应box 的事件，那就可以取消div1的事件冒泡，假设已经获取到div1，不想响应的事件是点击事件，大概代码是：
div1.onclick = function(ev)
ev.cancelBubble = true;
参考技术C
代码如下：
//首先获取所有div 然后你不是要根据div ID进行判断吗var aDiv=document.getElementsByTagName('div');
//遍历div
for(var i=0;i<aDiv.length;i++)
aDiv[i].onclick=function()
if(this.id='你要排除的那个div ID')
return;
;
;
; 参考技术D 大概是两种方式，
1】js的方式，写另外一个事件来判断，阻止你要响应的事件
2】css方式，在你想阻止的区域上面定位一个看不见的div，挡住目标div
以上是关于使用传统的js和css怎样实现在一个Div的范围中拖拽另一个Div. 请高手指教。的主要内容，如果未能解决你的问题，请参考以下文章
js在opera下怎样获取可编辑div中的鼠标光标和选中文本
怎样用 CSS + JS 美化网页中的 select 下拉框