var i=1;
function enableDrag(o)
{
if (typeof o == "string") o = document.getElementById(o);
o.orig_x = parseInt(o.style.left) - document.body.scrollLeft;
o.orig_y = parseInt(o.style.top) - document.body.scrollTop;
o.onmousedown = function(a)
{
this.style.zIndex = 100+i;
i++;
this.style.cursor = "move";
var d=document;
if(!a)a=window.event;
var x = a.clientX+d.body.scrollLeft-o.offsetLeft;
var y = a.clientY+d.body.scrollTop-o.offsetTop;
d.ondragstart = "return false;"
d.onselectstart = "return false;"
d.onselect = "document.selection.empty();"
//If the mousedown Event is in close button, close the layer and quit
if ((parseInt(o.style.width) - 30)< x && x < (parseInt(o.style.width) - 10)
&& (10 < y && y < 30))
{
setFormInvisible(o.id);
return;
}
if(o.setCapture)
o.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove = function(a)
{
if(!a)a=window.event;
o.style.left = a.clientX+document.body.scrollLeft-x;
o.style.top = a.clientY+document.body.scrollTop-y;
o.orig_x = parseInt(o.style.left) - document.body.scrollLeft;
o.orig_y = parseInt(o.style.top) - document.body.scrollTop;
}
d.onmouseup = function()
{
if(o.releaseCapture)
o.releaseCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove = null;
d.onmouseup = null;
d.ondragstart = null;
d.onselectstart = null;
d.onselect = null;
o.style.cursor = "normal";
}
}
}
function disableDrag(o)
{
//alert(o);
if (typeof o == "string") o = document.getElementById(o);
o.onmousedown = null;
}
// End: Functions for enabling/disabling drag and drop
分享到:
相关推荐
总的来说,"div移动块"是网页动态效果和交互设计的一个重要组成部分,它涉及到HTML结构、CSS样式和JavaScript编程,能够提升用户的网页体验。通过研究和实践这样的项目,开发者可以提升自己的前端技能,更好地理解和...
总结一下,创建一个可移动的div涉及HTML结构的设定,CSS样式的应用,以及JavaScript事件监听和处理。HTML提供基础元素,CSS定义视觉样式和定位,而JavaScript负责实现交互逻辑。在这个案例中,我们学习了如何结合这...
下面,我们将深入探讨这个主题,并结合“描述”中的“值得拥有”,来展示jQuery在处理div移动上的强大功能。 首先,让我们了解基础。在HTML中,div是一个块级元素,常用于组织页面结构。要移动一个div,我们需要...
本项目探讨的核心是“div移动并且排序的代码”,这意味着我们将在一个交互式的环境中,允许用户通过拖放操作来调整`div`元素的位置,从而实现页面布局的动态调整。这种功能通常涉及到JavaScript和CSS3技术,特别是...
`DIV` 移动组件是利用 JavaScript 实现的一种交互效果,允许用户通过编程方式控制 `DIV` 层的位置,为网页增添动态性和交互性。这种组件在网页设计、游戏开发或者复杂用户界面中都有广泛应用。 JavaScript 是一种轻...
在提供的"移动DIV.html"文件中,很可能会包含这些概念的实际应用。打开这个文件,你可以看到一个实际的`div`移动示例,通过查看和学习源代码,可以更好地理解以上知识点的实践。 总的来说,这个简单的`div`移动实例...
在网页设计中,有时我们需要实现一个功能:当用户将鼠标悬停在某个div元素上时,显示特定的信息或另一个div。这个功能可以增强用户体验,...在实际应用中,可能还需要考虑响应式设计,确保在移动设备上的表现同样出色。
在JavaScript中,实现鼠标拖动div移动的效果是...同时,压缩包内的"JS实现鼠标拖动div移动(附效果演示)"很可能是包含了一个示例代码和运行效果的HTML文件,通过查看和运行这个文件,你可以更直观地理解和学习这个过程。
在"DIV移动布局"中,关键在于使用JavaScript来赋予DIV元素拖动的功能。JavaScript是一种客户端脚本语言,它可以与用户的交互行为进行实时响应,比如鼠标点击和移动。这里提到的"Drag.js"可能就是实现这一功能的脚本...
标题中的“DIV可移动 可实现任意拖动放大缩小”是指一种使用JavaScript技术来实现的交互功能,允许用户在网页上自由地拖动、缩放HTML中的div元素。这一功能通常用于创建用户界面元素,如窗口、面板或者任何需要动态...
DIV层上下移动
首先,`div`是HTML中的一个块级元素,常用于布局和组织网页内容。在CSS中,我们可以对`div`进行样式设置,包括位置、大小、颜色等,以满足设计需求。在JavaScript中,我们可以通过操作DOM(文档对象模型)来改变`div...
本项目涉及的核心知识点是使用JavaScript(JQ和原生JS)与HTML来实现`div`元素的动态交互功能,包括移动、大小调整、右键菜单以及限制`div`在特定范围内的操作。下面将详细解释这些技术点。 1. 移动`div`: 在HTML...
标题“DIV上下移动”指的是在网页开发中,如何通过JavaScript或者CSS实现一个名为DIV的HTML元素在页面上上下移动的效果。这种效果常用于创建动态用户界面,如按钮悬停动画或者提示信息显示等。让我们深入探讨一下...
2. 添加一个`mousemove`事件监听器,当用户移动鼠标时,计算div的新位置并更新其`left`和`top`样式属性,实现div的移动。 3. 当用户释放鼠标按钮时,移除`mousemove`事件监听器,防止不必要的移动。 以上代码是基础...
本话题主要探讨如何利用HTML和JavaScript来实现图片的翻转、缩放、移动功能,并在移动过程中处理div的分层问题。 首先,我们需要在HTML中创建一个包含图片的div元素。HTML代码可能如下: ```html <div id="image-...
div随鼠标自由移动,代码简单,移动流畅,兼容ie、firefox、chrome等主流浏览器。
首先,我们需要一个HTML结构,包含一个我们要移动的div元素。例如: ```html <!DOCTYPE html> <html lang="zh"> 移动层跟随鼠标 #floatingDiv { position: absolute; width: 200px; height: 100px; ...
当DIV移动到特定位置或满足某个条件时,如到达边界或停顿一段时间,我们可以发送一个AJAX请求到后台服务器,请求JSON格式的数据。 6. **AJAX请求**:使用`XMLHttpRequest`对象或jQuery的`$.ajax()`函数发送HTTP请求...
本文将详细探讨"DIV移动并排序JS效果"这一主题,包括其核心概念、实现方法以及实际应用。 一、核心概念 1. DIV元素:在HTML中,`<div>` 是一个用于组合其他 HTML 元素的容器,它本身没有特定的语义,但可以用于...