<html>
<head>
<title>Drag 'n' Drop Demo</title>
<style>
#foo {
position:absolute;
top:100px;
left:100px;
width:100px;
height:100px;
background-color:#f0f0f0;
border:solid 1px #121212;
}
#foo1 {
position:absolute;
top:150px;
left:130px;
width:100px;
height:100px;
background-color:#fff0f0;
border:solid 1px #121212;
}
#foo2 {
position:absolute;
top:150px;
left:230px;
width:100px;
height:100px;
background-color:#fff0f0;
border:solid 1px #121212;
}
#foo3 {
position:absolute;
top:150px;
left:330px;
width:100px;
height:100px;
background-color:#fff0f0;
border:solid 1px #121212;
}
#foo4 {
position:absolute;
top:150px;
left:430px;
width:100px;
height:100px;
background-color:#fff0f0;
border:solid 1px #121212;
}
#area{
position:absolute;
top:150px;
left:430px;
width:300px;
height:300px;
background-color:#ffffff;
border:dashed 1px #CCCCCC;
}
</style>
</head>
<body>
<script>
window.onload = function(){
var test = new ObjectDragDrop(foo);
var test1 = new ObjectDragDrop("foo1");
var test2 = new ObjectDragDrop("p1");
var test4 = new ObjectDragDrop("foo2");
test4.moveStyle = DD_HMOVE ;
var test5 = new ObjectDragDrop("foo3");
test5.moveStyle = DD_VMOVE ;
// 限制在整个范围内移动
var test6 = new ObjectDragDrop("foo4");
var oldPosLeft = 430;
var oldPosTop = 150;
test6.isMoved = function(newPosX,newPosY){
//长宽为200的正方形范围
return {x:newPosX>=430&&newPosX<=(200+430),y:newPosY>=150&&newPosY<=(200+150)}
}
}
/**
* 类 名 称： DragDrop|DD
* 功能说明： 可拖动类
* 版权信息： CopyRight 2005-2006 JoeCom
* 创 建 人： JoeCom | MSN:juwuyi@hotmail.com | blog:http://blog.csdn.net/juwuyi
* 创建日期： 2006-07-19
* 修改记录： 1. 2006-07-21 加上scrollTop 和 scrollLeft的相对移动
ł. 2006-07-25 加入moveStyle属性，增加水平移动和垂直移动的功能
Ń. 2006-07-25 加入isMoved函数，增加范围移动功能
*/
//以下定义移动方向的常量
DD_FREEMOVE = 0; //自由移动，没有限制
DD_HMOVE = 1; //水平移动，也就是左右移动
DD_VMOVE = 2; //垂直移动，也就是上下移动
function ObjectDragDrop(obj){
var me = this;
this.moveStyle = DD_FREEMOVE ;
this.foo = (typeof obj=="string")?document.getElementById(obj):obj;
this.onDrop = function(){};
this.onDrag = function(){};
this.isMoved = function(newPosX,newPosY){return {x:true,y:true}};//offsetX:x的移动距离;offsetY:y的移动距离
this.foo.onmousedown = function(e){
var foo = me.foo;
e = e||event;
if( e.layerX ){ foo.oOffset = {x:e.layerX, y:e.layerY }; }
else { foo.oOffset = {x:e.offsetX, y:e.offsetY }; }
document.onmousemove = me.drag;
document.onmouseup = me.drop;
document.onselectstart = function(){ return false; };
}
this.drag = function(e){
var foo = me.foo;
e=e||event;
var mv = me.isMoved(e.clientX - foo.oOffset.x + document.body.scrollLeft,
e.clientY - foo.oOffset.y + document.body.scrollTop);
if (mv.x&&me.moveStyle!=DD_VMOVE)
{
foo.style.left = e.clientX - foo.oOffset.x + document.body.scrollLeft + "px";
}
if (mv.y&&me.moveStyle!=DD_HMOVE)
{
foo.style.top = e.clientY - foo.oOffset.y + document.body.scrollTop + "px";
}
me.onDrag();
}
this.drop = function(e){
e=e||event;
document.onmousemove = document.onmouseup = document.onselectstart = null;
me.onDrop();
}
}
</script>
<h1>最简单的拖动演示</h1>
<span style="position:absolute;left:200px;top:350px;" id="p1">拖动我啊</span>
<div id="foo">test</div>
<div id="foo1">test<br>test2</div>
<div id="foo2">水平移动</div>
<div id="foo3">垂直移动</div>
<div id="area"></div>
<div id="foo4">限制范围移动</div>
</body>
</html>
分享到：
相关推荐
在实际应用中，div拖动插件通常包括以下功能： 1. **初始化**：设置可拖动的div元素，添加必要样式和事件监听器。 2. **开始拖动**：当用户按下鼠标并在div上移动时，记录初始位置和鼠标位置。 3. **拖动中**：持续...
div拖动
根据提供的文件信息，本文将详细解析“div拖动”这一技术相关的知识点，包括其实现原理、应用场景以及具体的代码实现方式。 ### 一、基础知识：理解div拖动 #### 1.1 div元素简介 在HTML中，`div`是块级元素中最...
总结来说，"Ext div拖动demo"是一个使用Ext JS库和JavaScript实现的<div>元素上下拖动的示例，它展示了如何利用Web技术创建动态、交互式的用户界面。通过理解并应用这些知识，开发者可以提升Web应用的用户体验，并在...
以上代码实现了一个基本的jQuery div拖动排序效果，结合CSS样式，让元素从左到右逐渐展开。请注意，CSS Scroll Snap和一些过渡效果可能需要现代浏览器支持。在实际应用中，你可能需要根据具体需求进行调整和优化。
超酷 DIV拖拽 分页 超酷 DIV拖拽 分页 超酷 DIV拖拽 分页 超酷 DIV拖拽 分页 超酷 DIV拖拽 分页 超酷 DIV拖拽 分页 超酷 DIV拖拽 分页 超酷 DIV拖拽 分页 超酷 DIV拖拽 分页 超酷 DIV拖拽 分页 超酷 DIV拖拽 分页 ...
- 当div被拖动到新的位置后，我们可能希望保存这个位置信息。这时可以使用Ajax发送一个请求到服务器。 - 创建一个新的XMLHttpRequest对象，这是Ajax的核心组件，用于与服务器通信。 - 编写`send()`方法的参数，...
纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线，外部资源仅需要jquery。有以下功能： 1、创建节点 2、节点随鼠标任意拖动 3、切换拖动和画线模式 4、用鼠标绘制两个节点之间带有箭头的连线 5、连接线随节点...
在网页设计和开发中，"div 拖动 交换位置"是一个常见的交互功能，它允许用户通过拖动页面上的 div 元素来改变它们的位置，实现动态布局。这一功能通常涉及HTML、CSS以及JavaScript（可能包括jQuery或其他库）等技术...
标题“JS DIV拖动交换位置DEMO”涉及的是JavaScript中实现动态拖动并交换HTML元素，特别是`div`元素位置的技术。在这个示例中，开发者可能想要创建一个交互式的用户界面，用户可以通过鼠标拖拽来调整`div`元素的顺序...
标题“弹出div拖动层”所指的就是这样一个功能，它允许用户通过鼠标来移动一个浮层div，这种功能常见于对话框、提示窗口或者自定义菜单等元素。下面我们将深入探讨这个主题，包括div的基本概念、拖动功能的实现以及...
Div拖动/调整大小实例 教你迅速的掌握如何写js 可以用鼠标控制div大小和位置 Div拖动/调整大小实例 教你迅速的掌握如何写js 可以用鼠标控制div大小和位置
2. **自定义div拖动**：此插件的核心功能是让开发者能够选择任何div元素，并赋予它们拖动的能力。这意味着开发者可以创建具有拖动行为的自定义界面元素，如面板、窗口或工具栏。 3. **仅限X轴拖动**：这个特性限制...
本篇文章将深入探讨如何使用 jQuery Sortable 实现div的拖动排序效果。 首先，你需要在项目中引入 jQuery 和 jQuery UI 的库。jQuery 是一个广泛使用的JavaScript库，而 jQuery UI 提供了包括Sortable在内的多种...
本示例涉及的主题是“js控制多个div拖拽和拖动、且能保存数据至cookie、数据库、xml”，这是一项实用技术，尤其适用于创建交互性强的Web 2.0应用程序。下面将详细介绍这一主题的相关知识点。 首先，让我们了解...
可拖动div边框改变大小的方法,jquery拖拽改变div大小效果，。。。。。。。。。。。。。。。。。。。。。。。。。
DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动
在页面上实现自由拖动DIV的小程序；鼠标点击后选中DIV并开始拖动，拖动过程中透明显示，移动时根据鼠标位置计算控件左上角的绝对位置，松开鼠标后停止移动并恢复成不透明
本示例主要关注的是“js行拖动”，“div拖动”以及“图片拖动”。这些功能通常用于创建可自定义排序的列表、布局调整或图像编辑等场景。 1. **js行拖动**： js行拖动通常涉及到HTML表格中的行或者列表项（li）的...
以上就是关于“jQuery弹出div层窗口、div屏幕居中、背景滤镜效果和div拖拽效果”的核心知识点。通过熟练掌握这些技巧，开发者可以创建更富有互动性和用户体验的网页应用。在实际开发中，还需要根据不同的项目需求，...