<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('box1');
//console.info(getPos(oDiv).leftX);//测试可以
//三个事件
//兼容性没有做判断
//通过以下两种可实现ie7及以下浏览器的兼容
//setCapture全局捕获 再释放捕获
//return false
//以前两种可实现兼容性问题，并没有用浏览器做兼容实验 所用版本，chrome 40几来着记不清了
//也可做函数封装drag
oDiv.onmousedown=function(){
//当触发鼠标down事件时才能触发其它两事件
var e=window.event||evt;
var disX=e.clientX-getPos(oDiv).leftX;
var disY=e.clientY-getPos(oDiv).topY;
//oDiv.onmousemove拖快了会出现bug，调下就知道
document.onmousemove=function(evt){
var e=window.event||evt;
//限定拖的范围
//磁性吸引 当靠近左边框100内自动跑到左边
var L=e.clientX-disX;
var T=e.clientY-disY;
if(T<0){
T=0;
}
if(L<100){
L=0;
}
oDiv.style.left=L+'px';
oDiv.style.top=T+'px';
};
document.onmouseup=function(){
document.onmousemove=null;
};
};
};
//封装一个获得绝对位置的函数
function getPos(obj){
var pos={
"leftX":0,
"topY":0
};
while(obj){
pos.leftX+=obj.offsetLeft;
pos.topY+=obj.offsetTop;
obj=obj.offsetParent;
}
return pos;
}
</script>
<style>
#box1{width:100px;height:100px;background:#C33;position:absolute;}
</style>
</head>
<body>
<div id='box1'>
</div>
</body>
//到此结束
分享到：
相关推荐
JavaScript拖拽翻页效果是一种流行的交互设计，它使得用户可以通过在网页上拖动内容来实现页面的滚动或切换，提供了一种更为直观和流畅的浏览体验。这种效果通常应用于长篇内容的展示，如电子书、画廊或者无限滚动的...
在这个教程中，我们将深入探讨JavaScript拖拽效果的实现原理和技巧。 拖拽效果是现代网页设计中常见的一种交互方式，它允许用户通过鼠标或触控设备移动元素，如图片、图标或文件。这个dbx项目可能提供了一个高效且...
首先，我们要了解JavaScript拼图游戏的基本原理。游戏通常由一个完整的图像被分割成若干小块组成，这些小块随机排列，玩家需要通过拖动或点击来调整它们的位置，最终恢复成完整的图像。在这个过程中，JavaScript起到...
5. **源码分析**：提供的文件"JavaScript可拖动DIV.html"应该包含了完整的实现示例。通过阅读和理解源码，你可以更深入地了解这个功能的工作原理，并根据实际需求进行修改和扩展。 总之，实现JavaScript可拖动div...
总之，创建一个带有拖拽和动画效果的JavaScript模态对话框需要理解DOM操作、事件处理、CSS样式以及动画原理。通过学习`ModelDialog-0.6.html`和`ModelDialog-0.6.js`中的代码，我们可以深入理解这些概念并应用于自己...
在本文中，我们将探讨拖放的基本原理以及如何使用JavaScript实现这一功能。 首先，拖放功能的核心在于浏览器提供的`HTML5 Drag and Drop API`，它允许开发者定义拖动源（drag source）、放置目标（drop target）...
主要给大家介绍了关于在firefox浏览器下如何利用javascript实现拖动层效果，以及其中的原理分析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，下面来一起看看吧
本文将深入探讨如何通过 JavaScript 实现元素的拖动，并分析给出的代码片段中的关键知识点。 #### 二、拖动的基本原理 拖动一个元素通常包括以下几个步骤： 1. **监听鼠标按下事件**：当用户点击元素时，我们首先...
本文将详细介绍Javascript拖拽功能的实现原理，并通过逐行代码分析的方式，帮助读者轻松掌握拖拽功能的实现过程。 首先，我们要明白拖拽的原理。简单来说，拖拽功能的实现就是跟踪鼠标的位置，并以此计算出拖拽元素...
**AJAX异步处理原理分析** AJAX，全称Asynchronous JavaScript and XML（异步JavaScript和XML），是一种在不刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现局部...
**JavaScript拖拽流程设计器** 在Web开发中，创建交互式用户界面是提升用户体验的重要手段，而流程设计器就是其中的一种。JavaScript作为最广泛使用的客户端脚本语言，为实现这样的功能提供了强大的支持。本文将...
### JavaScript HTML5 Canvas 实现可拖动省份的中国地图知识点详解 #### 一、项目概述与背景 本项目旨在利用JavaScript结合HTML5的Canvas技术来实现一个可交互式的中国地图，用户可以通过鼠标拖动的方式查看不同...
在JavaScript中实现拖动效果是一项常见的任务，尤其在构建交互式网页或富互联网应用程序时。这个主题涉及到DOM操作、事件监听、鼠标位置计算等多个技术点。以下是对这一知识点的详细阐述： 1. **事件监听**：...
Bootstrap 图片拖拽上传是一种基于流行的前端框架Bootstrap实现的交互功能，它允许用户通过简单的拖放操作来上传图片。在现代网页开发中，这种功能提高了用户体验，使得文件上传过程更加直观和便捷。以下是对这个...
2. 强大的地理分析：集成了一系列地理分析工具，如缓冲区分析、叠置分析等，让开发者可以轻松实现复杂的地理计算。 3. 高度可定制化：API提供了丰富的样式选项和自定义控件，开发者可以根据需求定制地图的外观和...
#### 一、MVC 架构与 JavaScript Web 富应用 《JavaScript Web 富应用开发》一书详细介绍了如何利用现代 Web 技术构建下一代互联网富应用程序。随着 MVC（Model-View-Controller）架构在前端领域的广泛应用和发展，...
本文将深入讲解如何通过逐行分析代码来理解JavaScript拖拽的基本原理，以及解决常见的问题。首先，让我们回顾一下上期的拖拽雏形代码： ```javascript window.onload = function() { var oDiv = document....
在IT领域，特别是前端开发中，JavaScript（简称JS）是一种广泛使用的编程语言，它能够实现网页上的动态交互功能。在给定的文件信息中，主要关注的是如何利用JS实现DOM对象的拖拽效果。下面将深入解析这个知识点，...