<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"></meta>
<title>拖拽图层</title>
<header>
<script>
function getStyle(o,key){return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,null)[key]}//'currentStyle' only for ie5.0+
var drag = function(bar, target){
var params = {
startLeft:0,
startTop:0,
_X:0,
_Y:0,
isDrag:false
};
if(getStyle(target,'left') != 'auto'){params.startLeft = getStyle(target,'left')}
if(getStyle(target,'top') != 'auto'){params.startTop = getStyle(target,'top')}
bar.onmousedown = function(e){
e = e?e:window.event; //'event' ie下局部变量，ff下全局变量
params.isDrag = true;
params._X = e.clientX; params._Y = e.clientY;
};
document.onmouseup = function(){
params.isDrag = false;
if(getStyle(target,'left') != 'auto'){params.startLeft = getStyle(target,'left')}
if(getStyle(target,'top') != 'auto'){params.startTop = getStyle(target,'top')}
};
document.onmousemove = function(e){
var e = e?e:window.event;
if(params.isDrag){
var curX = e.clientX, curY = e.clientY, desL = curX-params._X+parseInt(params.startLeft), desT = curY-params._Y+parseInt(params.startTop);
target.style['left'] = desL>=0?desL + 'px':0;
target.style['top'] = desT>=0?desT + 'px':0;
}
}
};
function test(){
document.getElementById('mybox').style.display='block';
var bar = document.getElementById('mybar'), tar = document.getElementById('mybox');
//alert(getStyle(bar, 'display'));
drag(bar,tar);
}
</script>
</header>
<body>
<div id="mybox" class="shadow" style="position: absolute; border: 4px solid #ccc; left: 300px; top: 10px; box-shadow: 3px 3px 4px #666; display: none;">
<div id="mybar" style="line-height: 24px; padding-left: 10px; background: #eee; border-bottom: 1px solid #ccc; cursor: move;">拖我试试...</div>
<div style="height: 150px; width: 250px; background: #fefefe;">content...</div>
</div>
<a onclick="test()" href="javascript:;">打开</a>
</body>
</html>
分享到：
相关推荐
在ASP.NET中实现一个可拖动的div是提高用户界面交互性和用户体验的有效方式，尤其当需要替代传统的alert对话框时，可拖动div能提供更加灵活和友好的用户体验。 首先，要实现可拖动的div，我们需要理解HTML和CSS的...
这个场景描述的“可拖动div弹窗esc关闭 锁屏”涉及到多个技术点，我们将逐一详细解释。 首先，"可拖动div"是指在HTML页面中，通过JavaScript或者jQuery实现一个div元素，用户可以通过鼠标点击并拖动来改变div的位置...
"可拖动div层"是这样的一个功能，它允许开发者创建一个浮动且可操作的div元素，通常用于弹出式窗口、对话框或者提示信息。这个功能在jQuery库的支持下，可以实现跨浏览器的兼容性，包括Internet Explorer（IE）、...
这个"js弹出可拖动div"的主题主要涵盖了HTML、CSS和JavaScript的结合，用于实现用户友好的界面元素。下面我们将深入探讨这个主题。 首先，我们需要一个基本的HTML结构来创建div元素。一个简单的div可能看起来像这样...
在网页开发中，可拖动Div控件是一种常见的交互元素，它允许用户通过鼠标操作将Div元素在页面上自由移动，提升用户体验。本教程将深入探讨如何使用JavaScript实现这一功能。 首先，我们要明白Div是HTML中的一个块级...
可拖动div边框改变大小的方法,jquery拖拽改变div大小效果，。。。。。。。。。。。。。。。。。。。。。。。。。
JavaScript可拖动DIV是一种常见的网页交互功能，它允许用户通过鼠标拖动来改变网页上某个元素（通常是div）的位置。这种技术在构建交互式界面、拖放式操作、地图应用等场景中非常常见。在本篇文章中，我们将深入探讨...
以上代码实现了一个基本的可拖动div元素，包括坐标显示和前进后退功能。需要注意的是，这里的前进和后退功能仅限于拖动历史记录，与浏览器的历史记录不同。在实际项目中，可能需要根据具体需求对这些功能进行扩展和...
《jQuery弹出可拖动Div模态层源码解析与应用》 在Web开发中，交互性和用户体验成为了衡量一个网站质量的重要标准。jQuery作为一个轻量级的JavaScript库，以其简洁的API和强大的功能，深受开发者喜爱。今天我们将...
标题中的“弹出可拖动DIV，CSS圆角”指的是在网页设计中使用HTML和CSS技术创建一个可以被用户拖动并且具有圆角效果的浮动窗口。这种功能常见于各种弹窗、对话框或者提示框设计，提升用户体验，使得交互更加直观和...
总之，理解并掌握如何使用jQuery创建可拖动div对于前端开发者来说是一项基础但重要的技能。这不仅可以提升用户体验，也是构建复杂Web应用时必不可少的一部分。在实际项目中，可以根据具体需求调整代码，实现更加灵活...
可拖动的div页面，可以做网站主页等页面
现在切入正题，说一下js 实现可拖动Div.实现这个功能我们先说一下思路： 1.捕捉鼠标div的mousedown事件 2.捕捉 document的 mousemove事件 3.取消事件 然后我们看一下代码： 代码如下:function Drag(id) {...
在网页开发中，实现仿Google风格...通过这种方式，我们可以创建一个仿Google风格的可拖动div，使用户能够在页面上自由移动元素，提升交互体验。在开发过程中，应始终关注用户体验，确保拖动操作流畅且符合用户的直觉。
接着，我们讨论“可拖动DIV”。这涉及到jQuery UI库中的Draggable插件，它可以将任何元素转化为可拖动的元素。通过添加`draggable()`方法，并配置适当的参数，我们可以让一个DIV在页面上自由移动。例如： ```...
总之，判断可拖动div是否重合以及重合多少，需要结合CSS定位和JavaScript动态检测。通过获取元素位置，设定重合条件，计算重合面积，监听拖动事件并提供视觉反馈，我们可以创建出一个交互式的、能准确反映div重合...
将AJAX与可拖动div框结合，可以实现在拖放过程中实时保存或更新div的位置，从而提升用户体验。 实现AJAX拖动div框的关键步骤： 1. 在`mouseup`事件处理函数中，利用AJAX向服务器发送一个请求，携带div的新位置信息...
“可拖动DIV”是指使用JavaScript或者HTML5的拖放API实现的网页元素拖动功能；“可保存DIV”则意味着用户对页面布局的更改能够持久化存储，这是通过服务器端或客户端的本地存储技术实现的，如Cookie、LocalStorage或...
以上就是实现“js拖动div并拖动DIV的大小”的主要步骤和涉及的技术。实际开发中，你可以选择使用库或框架，如jQuery UI的Resizable组件，来简化这一过程。然而，理解这些基础知识将帮助你更好地理解和定制功能，特别...
可拖动DIV .draggable { width: 200px; height: 200px; background-color: #f0f0f0; position: absolute; cursor: move; } <div id="draggable" class="draggable">拖动我</div> ...