<html>
<head>
<title>可拖拽的元素</title>
<script language="javascript">
/*
第一个参数是要移动的元素
第二个参数是触发对象,(鼠标)
*/
function begin(drag,event)
{
//要移动元素左上角的坐标
var x=parseInt(drag.style.left);
var y=parseInt(drag.style.top);
//计算鼠标与元素之间的距离
var delx=event.clientX-parseInt(drag.style.left);
var dely=event.clientY-parseInt(drag.style.top);
// 鼠标按钮保持按下的状态时,这些事件处理程序保持活动的状态
document.attachEvent("onmousemove",moveHandle);
// 在按钮被释放时,他们被删除
document.attachEvent("onmouseup",upHandle);
// 让该事件不起泡(还有俩个说法:1.不向上传递事件;2.让该事件对其他标记不可见)
event.cancelBubble=true;
// 返回值为0; 其实我不太懂这句有什么意义...- -
event.returnValue=false;
/*
捕捉mousemove事件的~处理程序~
*/
function moveHandle(e)
{
e=window.event;
drag.style.left=(event.clientX-delx)+"px";
drag.style.top=(event.clientY-dely)+"px";
// 不起泡
event.cancelBubble=true;
}
/*
捕捉松开按钮时发生的mouseup事件
*/
function upHandle(e)
{
//注销事件
//不懂为什么第一个注销up事件,难道是最后完成的要最先注销?
document.detachEvent("onmouseup",upHandle);
document.detachEvent("onmousemove",moveHandle);
}
//再次不起泡
event.cancelBubble=true;
}
</script>
</head>
<!--第一个例子-->
<body>
<!--样式里:left和top设定起始位置.position必须为absolute-->
<div style="left:0px;top:0px; position:absolute" onmousedown="begin(this,event)">你可以拖我...但是不要抛弃我.0 0..</div>
<!--第二个例子-->
<div style="position:absolute; left:50px;top:50px; border-style:dashed; border-width:thin; width: 246px; height: 117px;" >
<div style="position:absolute; left:5px; top:0px;width: 232px; background-color:pink"onMouseDown="begin(this.parentNode,event)">与老婆约法三章</div>
<div style="position:absolute; left:px; top:18px;">
<ul>
<li>第一.你要爱我</li>
<li>第二.我说的话永远都是对的.</li>
<li>第三.如果我说错了.请参照第二条</li>
</ul>
</div>
</div>
</body>
</html>
分享到：
相关推荐
JavaScript可拖动层技术是网页开发中的一个重要组成部分，它允许用户通过鼠标操作在网页上移动元素，提升用户体验，尤其在创建交互式用户界面时显得尤为关键。这种技术基于JavaScript，一种广泛使用的客户端脚本语言...
"jQuery弹出可拖动层"是一个常见的功能需求，它结合了jQuery的强大功能和用户界面的交互性，使得创建弹出窗口并赋予其拖动能力成为可能。这种技术广泛应用于各种网页应用，如模态对话框、提示信息、表单验证等场景。...
js版许愿墙 拖动层 许愿墙 可拖动层
在IT行业中，尤其是在前端开发领域，可拖动层（Draggable Layer）是一种常见的交互设计，它允许用户通过鼠标或触摸设备来移动页面上的特定元素。这个"通用可拖动层示例兼容火狐，IE"就是一个针对不同浏览器，尤其是...
此处提到了“两个层可替换”，这意味着用户不仅可以拖动停靠层，还可以交换两个层的位置，这为用户提供了更多的布局可能性。同时，它还引用了“类似于Google那个”，可能是在暗示这个实现方式与Google的一些产品（如...
在这里，"表格图层"可能是指在表格元素上添加了一层可拖动的组件，使得用户可以对表格内的数据进行更直观的操作或分析。 在压缩包中，尽管没有提供具体的文件名，我们可以推测它可能包含以下内容： 1. HTML文件：...
在这个项目中，我们关注的是一个实现拖动层功能并且能够保存拖动后位置信息的解决方案。这个功能通常用于创建交互式用户界面，允许用户自定义布局或调整元素的位置。 首先，我们要理解"拖动层"的概念。在网页设计中...
1. HTML结构：在HTML中，我们需要创建一个容器元素（如`<div>`），它将作为可拖动层的基础。通常，这个容器会包含所有需要拖动的内容。例如： ```html 这是可以拖动的内容 ``` 2. CSS样式：为了使层看起来像一...
本知识点将深入探讨如何使用JavaScript实现一个可拖动的层（DIV）。DIV作为一个常用的HTML元素，通常用于布局和组织网页内容。通过赋予其拖动功能，用户可以自由调整层的位置，提供更灵活的交互体验。 首先，我们...
1. **初始化层和边界**: 创建HTML元素作为可拖动层，并确定其初始位置。同时，定义边界区域，比如左、右、上、下的最大值。 2. **绑定事件**: 使用`addEventListener`方法为层添加鼠标事件监听器。`mousedown`事件...
本项目标题“jquery做的可以拖动的层”表明我们正在讨论一个利用jQuery实现的可拖动层的功能。这个功能使得用户可以通过鼠标在页面上的交互来移动页面上的元素，从而提供更加动态和交互式的用户体验。 描述中提到，...
**jQuery拖动任意层** jQuery库为Web开发者提供了一种高效、简洁的方式来操作DOM（文档对象模型），并处理用户交互。在本示例中，我们将深入探讨如何利用jQuery实现网页上的层（通常指的是div元素）的拖动功能。这...
已经定义成方法，直接用就行。兼容性已经全部搞定，具体样式可自行修改
总之，"js层拖动特效.rar"提供的资源是一个关于如何使用JavaScript（可能结合jQuery）在网页上创建可拖动层的实例。这种技术常用于创建交互式用户界面，如拖放组件、窗口式应用或自定义控件。通过学习和理解这个示例...
可拖动层的实现原理 在网页设计中，实现元素（如一个层）的拖拽功能是非常实用的功能之一，尤其对于需要用户交互的应用场景更为重要。该示例通过结合JavaScript与CSS实现了这一功能，并确保了其在不同浏览器（包括...
1. **HTML结构**：首先，创建一个div元素作为可拖动层，为其设置一个唯一的ID以便于JavaScript操作。 ```html ; width:200px; height:200px;"> ``` 2. **CSS样式**：设置div的样式，使其能够脱离文档流并能根据...
### 二、实现原理：如何使div可拖动 #### 2.1 使用JavaScript实现拖动 要使一个`div`元素具有拖动的功能，通常需要结合JavaScript来完成。具体步骤如下： - **监听mousedown事件**：当用户按下鼠标左键时触发。 - ...
可随意拖动的层，用来实现动态排版非常方便
在提供的压缩包文件"可拖动层实例代码"中，应该包含了一个HTML文件、一个CSS文件和一个JS文件。HTML文件定义了层的结构和交互元素，CSS文件负责样式设置，JS文件则包含了上述提到的拖动和动态效果的实现逻辑。通过...