<!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>
<title>自由拖动的DIV层方块</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
#draggable{
background-color:green;
font-size:9pt;
padding:30px;
color:white;
width:360px;
height:324px;
position:absolute;
}
</style>
<script type="text/javascript">
var rDrag = {
o:null,
init:function(o){
o.onmousedown = this.start;
},
start:function(e){
var o;
// e = rDrag.fixEvent(e);
if(e.button==2){
}else{
e.preventDefault && e.preventDefault();
rDrag.o = o = this;
o.x = e.clientX - rDrag.o.offsetLeft;
o.y = e.clientY - rDrag.o.offsetTop;
document.onmousemove = rDrag.move;
document.onmouseup = rDrag.end;
}
},
move:function(e){
// e = rDrag.fixEvent(e);
var oLeft,oTop;
oLeft = e.clientX - rDrag.o.x;
oTop = e.clientY - rDrag.o.y;
rDrag.o.style.left = oLeft + 'px';
rDrag.o.style.top = oTop + 'px';
},
end:function(e){
// e = rDrag.fixEvent(e);
rDrag.o = document.onmousemove = document.onmouseup = null;
},
fixEvent: function(e){
if (!e) {
e = window.event;
e.target = e.srcElement;
e.layerX = e.offsetX;
e.layerY = e.offsetY;
}
return e;
}
}
window.onload = function(){
var obj = document.getElementById('draggable');
rDrag.init(obj);
}
</script>
</head>
<body>
<div id="draggable">这个可以拖动！</a><div style="background-color:red;height:300px;"></div></div>
</body>
</html>
分享到：
相关推荐
可拖拽 Div 指的是用户可以手动拖动 Div 在页面中的位置。这一功能通常采用原生 JavaScript 实现。 #### 实现步骤 1. **绑定事件监听器**：为 Div 绑定 `mousedown` 事件，当用户按下鼠标左键时触发。 2. **获取...
"js可拖拽停靠吸附DIV"这个主题涉及的技术点主要包括：JavaScript基础、DOM操作、事件处理、CSS定位以及可能的自定义动画效果。 1. **JavaScript基础**： - **变量与数据类型**：在实现拖拽功能时，我们需要声明并...
在“jquery 拖拽div”的场景中，我们需要关注的是`mousedown`、`mousemove`和`mouseup`这三个与鼠标交互密切相关的事件。它们分别在鼠标按键按下、移动和释放时触发。 1. **初始化拖拽功能**： - 首先，我们需要...
本教程将详细讲解如何利用jQuery实现一个div元素的拖动排序效果，结合CSS样式，创建出一款从左到右慢慢展开且可自由拖动排序的特效。 首先，我们需要在HTML中设置好基础结构。创建一系列的div元素，每个div代表一个...
纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线，外部资源仅需要jquery。有以下功能： 1、创建节点 2、节点随鼠标任意拖动 3、切换拖动和画线模式 4、用鼠标绘制两个节点之间带有箭头的连线 5、连接线随节点...
1. **CSS样式设定**：首先，为 `div` 设置合适的宽度、高度和溢出隐藏（`overflow: auto` 或 `overflow-y: scroll`），以便在内容过多时自动出现滚动条。同时，可能需要设置边框、内边距和外边距以美化布局。 2. **...
为了实现拖拽div的功能，开发者通常会监听鼠标的`mousedown`、`mousemove`和`mouseup`事件，计算鼠标与div的相对位置，然后在`mousemove`事件中更新div的位置。例如，可以使用以下代码片段： ```javascript var ...
在JavaScript编程中，实现DIV元素的拖拽布局是一项常见的任务，尤其在构建可交互的Web应用或自定义桌面界面时。这项技术的核心是利用事件监听和DOM操作来模拟物理世界中的拖放行为。下面我们将详细探讨如何实现这个...
吸附效果是指Div在接近其他Div时，会自动吸附到一起。这种效果可以通过监听元素间的距离，当达到一定阈值时触发吸附。通过CSS和JavaScript的配合，可以实现平滑的吸附动画。 五、网格布局拖拽 在网格布局中，每个...
jQuery拖动DIV滑块代码基于jquery-1.9.1.min.js制作，包括只能水平拖动；只能垂直拖动；自由拖动，初始位置固定；自动拖动，初始位置随机；自动拖动，初始位置随机，hander拖动等多种拖动效果。
这个“js拖拽排序-可以拖拽的DIV.rar”文件很可能是包含了一个或多个示例代码，用于演示如何在HTML页面上创建可拖动并能自动排序的DIV元素。下面，我们将深入探讨这一技术的关键知识点。 首先，我们需要理解拖放...
这样，具有`.centered-div`类的div会自动居中。 **背景滤镜效果** 在jQuery中，创建背景滤镜效果通常涉及到CSS3的透明度和过渡效果。例如，可以为背景添加渐变阴影： ```css body { background-color: #f0f0f0; ...
scroll: false // 禁止页面滚动时自动调整div位置 }); ``` 接下来是“可固定DIV”。这个功能通常用于创建如侧边栏、工具栏等元素，它们在页面滚动时始终保持在屏幕的特定位置。可以使用CSS的`position: fixed`属性...
这是一个使用Mootools.js插件来实现的DIV层智能拖动特效实例，当拖动快要结束时可自动排列，只要松开鼠标即可自动排列DIV,在前几年这功能很流行，现在用的少了，一般是在一些博客系统的管理后台中，便于用户对各个...
在网页开发中，有时我们需要实现用户界面元素的动态交互，比如让一个`div`元素能够被用户拖动。"基于EXT的div拖动"是指利用EXTJS这一强大的JavaScript框架来实现这种功能。EXTJS是一个用于构建富客户端Web应用的前端...
"jQuery+blockDrag.js拖动div栅格布局代码"是一个实现此类功能的示例，它允许用户通过鼠标拖动来调整div元素的位置，并自动吸附到预定义的网格中，确保布局整洁且对齐。接下来，我们将深入探讨这个解决方案的核心...
我们需要在可拖动的`div`上设置`draggable`属性为`true`，然后为`div`添加拖放事件监听器。例如，我们可以定义`ondragstart`、`ondrag`和`ondragend`事件处理器。在`ondragstart`中，我们通常会保存`div`的原始位置...
本文将深入探讨jQuery拖动吸附栅格内对齐代码，这是用于创建可拖动并能自动吸附到网格布局中的div元素的实用功能。 首先，"jQuery拖动吸附栅格内对齐代码"是一种实现用户界面交互的技术，允许用户通过鼠标拖动div...
在代码示例中，还展示了如何使用组件来包裹可拖动的div元素，从而在元素位置变更时，Vue能够自动为元素添加平滑的过渡效果。 最后，样式部分主要定义了容器和子元素的基本样式，包括容器的位置、尺寸以及布局方式。...