`

会移动的 DIV

阅读更多
<div id="movediv" style="width:250px;height:200px;border:1px #000 solid; position:absolute;left:400px;top:218px;">
 <div id="movespan">朋友:用鼠标来拖走我吧!我在这里太久了!</div>
 <div style="background:red; height:50px;"></div>
</div>
<script language="JavaScript" type="text/javascript">
var dragdrop={
 registerDragdropHandler:function(handler,target,cursor){ // 注册鼠标移动的一些事件。
 var _IsMousedown=false,_ClickLeft=0,_ClickTop=0;
 var _hDom=this.get(handler);
 var _tDom=this.get(target);
 _hDom.style.cursor=cursor||"move";
 
  function startDrag(evt){ // 按下鼠标左键时的事件。
  evt=window.event||evt;  // 获取当前事件对象。
  _IsMousedown=true;  // 记录已经准备开始移动了。
  _ClickLeft=evt.clientX-parseInt(_tDom.style.left); // 记录当前坐标轴。
  _ClickTop=evt.clientY-parseInt(_tDom.style.top);
 }
     function doDrag(evt){ // 鼠标开始移动时的事件。
  evt=window.event||evt; // 获取当前事件对象。
  if(!_IsMousedown)return false; // 如果_IsMousedown不等于真了返回。
  _tDom.style.left=evt.clientX-_ClickLeft+"px"; // 把鼠标当前移动的位置赋值给div
  _tDom.style.top=evt.clientY-_ClickTop+"px"; // 当前位置减去开始位置就是层当前存放的位置。
 }
     function endDrag(){ // 释放鼠标左键时的事件。
  if(_IsMousedown){ // 如果_IsMousedown还为真那么就赋值为假。
  if(this.isIE) _tDom.releaseCapture(); //该函数从当前的窗口释放鼠标捕获,并恢复通常的鼠标输入处理。
  _IsMousedown=false;
  }
 }
     _hDom.onmousedown=startDrag; // 鼠标按下事件。
 document.onmouseup=endDrag;  // 鼠标释放事件。
 document.onmousemove=doDrag; // 鼠标移动事件。
 _tDom.onselectstart=_tDom.oncontextmenu=function(){return false;}; // 禁止选择和右键菜单。
 },
 isIE:(navigator.appName=="Microsoft Internet Explorer"), // 判断是否为IE。
 get:function(element){ // 通过一串字符返回一个对象。
 if(typeof(element) == "string"){
  return document.getElementById(element);
 }
 return element;
 }
};
// 使用方式如下:
dragdrop.registerDragdropHandler("movespan","movediv");
</script>



<SCRIPT LANGUAGE="JavaScript">
<!--
var isCatchDiv = false;
var dragX = 0;
var dragY = 0;
var divMove;
function loadDiv(){
divMove=document.getElementById("sss");
divMove.style.top=document.body.scrollTop;
divMove.style.left=document.body.scrollLeft;
} 
function hideDiv(){
divMove.style.visibility = "hidden";
}
function showDiv(){
loadDiv();
divMove.style.visibility = "visible";
}
function catchDiv(obj){
divMove = obj;
isCatchDiv = true;
var x=event.x+document.body.scrollLeft;
var y=event.y+document.body.scrollTop;
dragX=x-divMove.style.pixelLeft;
dragY=y-divMove.style.pixelTop;
divMove.setCapture();
document.onmousemove = moveDiv;
}
function releaseDiv(){
isCatchDiv = false;
divMove.releaseCapture();
document.onmousemove = null;
}
function moveDiv(){
if(isCatchDiv){
divMove.style.left = event.x+document.body.scrollLeft-dragX;
divMove.style.top = event.y+document.body.scrollTop-dragY;
}
}
window.onload = showDiv;
//-->
</SCRIPT>
<style type="text/css">
body{
font-size:12px;
font:Arial, Helvetica, sans-serif;
}
body a,a:link,a:visited {color:#000000;text-decoration:none}
#sss{
position:absolute;
width:300px;
height:200px;
background-color:#E1F0FF;
}
</style>
<div id="sss" style="cursor:move;" onMouseDown="catchDiv(this);" onMouseUp="releaseDiv()">
<a href="asdf">余弦函数</a>
</div>
分享到:
评论

相关推荐

    可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV

    可移动的DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV...

    DIV 拖动 JS移动DIV DIV位置移动

    DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动

    移动div(jquery)

    标题“移动div(jquery)”暗示我们将讨论如何使用jQuery来实现div元素的动态移动效果,这在创建交互式用户界面时非常常见。下面,我们将深入探讨这个主题,并结合“描述”中的“值得拥有”,来展示jQuery在处理div...

    移动DIV简易实例

    在提供的"移动DIV.html"文件中,很可能会包含这些概念的实际应用。打开这个文件,你可以看到一个实际的`div`移动示例,通过查看和学习源代码,可以更好地理解以上知识点的实践。 总的来说,这个简单的`div`移动实例...

    div移动块(用于web上的小移动栏)

    为了使div移动更平滑,通常会使用CSS的`position`属性设置为`absolute`或`fixed`,这样div可以脱离正常的文档流,根据相对于其最近的非静态定位祖先元素或视口的位置进行定位。同时,使用`top`和`left`属性可以精确...

    鼠标移动到div上显示制定信息或者div(自适应显示位置)

    当鼠标离开"hover-div"时,"info-div"会自动隐藏。 这个功能实现了对不同屏幕尺寸的自适应,因为坐标计算是基于元素的相对位置,而不是固定的像素值。因此,无论屏幕大小如何变化,信息div总能正确显示。 通过以上...

    JS 可移动div层 移动div层 支持多个div层移动

    参考自:http://blog.csdn.net/k8080880/article/details/7166351 这下载文件只是为了懒人做的...

    js移动div源代码

    在这个例子中,当用户按下鼠标并移动时,div会跟随鼠标移动,松开鼠标后停止。 在实际项目中,可能会遇到更复杂的情况,比如多个div的相互碰撞检测、布局自动调整等问题,这就需要更高级的算法和技巧。标签中提到的...

    DIV可移动 可实现任意拖动放大缩小

    标题中的“DIV可移动 可实现任意拖动放大缩小”是指一种使用JavaScript技术来实现的交互功能,允许用户在网页上自由地拖动、缩放HTML中的div元素。这一功能通常用于创建用户界面元素,如窗口、面板或者任何需要动态...

    可移动div

    标题“可移动div”指的是在网页开发中,创建一个可以被用户通过鼠标拖动来改变位置的div元素。这样的功能通常用于创建浮动窗口、对话框或者自定义的控件,让用户能够自由调整其在页面上的布局。在网页设计中,这种...

    移动div+改变div大小+右键添加新的div+div只能在一个范围的。。JQ+js+html源码。。

    当鼠标按下时记录初始位置,鼠标移动时计算差值并更新`div`的位置,鼠标释放时停止更新。JQuery提供了简便的事件绑定方法,如`$(element).on('mousedown', function() {...})`。 2. 改变`div`大小: 要实现`div`的...

    html的可移动的div

    当我们需要创建一个可移动的div元素时,这通常涉及到动态布局和事件处理。本篇文章将详细探讨如何利用这些技术来实现一个可拖动的div。 首先,我们需要创建基本的HTML结构,一个简单的div元素作为我们要拖动的对象...

    js移动层和跟随鼠标的div

    这个脚本会在每次鼠标移动时调整div的位置,使得div的中心与鼠标坐标对齐,并确保div不会超出浏览器视口。 此外,为了使效果更加平滑,可以考虑使用CSS的`transition`属性,让div的位置变化带有动画效果: ```css ...

    DIV移动组件JavaScript

    `DIV` 移动组件是利用 JavaScript 实现的一种交互效果,允许用户通过编程方式控制 `DIV` 层的位置,为网页增添动态性和交互性。这种组件在网页设计、游戏开发或者复杂用户界面中都有广泛应用。 JavaScript 是一种轻...

    DIV可移动布局

    在网页设计中,"DIV可移动布局"是一种常见的前端技术,它允许用户通过拖动页面上的元素来调整页面布局,从而实现类似QQ空间那样的个性化和交互性。这种技术结合了HTML、CSS和JavaScript,为用户提供了一种动态和灵活...

    DIV层上下移动

    DIV层上下移动

    Jquery跟随滚动条移动的div动画效果

    "Jquery跟随滚动条移动的div动画效果"就是一个典型的例子,它利用jQuery库实现了一个div元素随着页面滚动条移动而同步移动的特效,而且这个div在移动过程中保持平滑,避免了闪烁现象,提升了用户体验。 首先,...

    div移动并且排序的代码

    在`ondragstart`中,我们通常会保存`div`的原始位置信息;在`ondrag`中,计算新的位置并更新样式;最后,在`ondragend`中,可以执行排序逻辑,比如更新数据结构以反映新的排列顺序。 CSS方面,为了使`div`可以被...

    DiV层移动实例(纯JS仿赛我的个人小窝)

    在网页设计中,"DiV层移动"是一种常见的动态效果,用于增强用户体验和视觉吸引力。这个实例是基于JavaScript实现的,模拟了“赛我的个人小窝”网站中的某个功能,让我们来深入了解一下这个主题。 首先,`div`是HTML...

    div不随滚动条的移动而改变位置

    标题"div不随滚动条的移动而改变位置"所指的问题是关于如何实现一个固定定位(fixed positioning)的 `div` 元素。这种效果使得 `div` 在页面上保持在一个特定位置,即使用户滚动页面,它也不会移动。这通常用于创建...

Global site tag (gtag.js) - Google Analytics