最近看书，练习下，写了个简单的拖拽
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单拖拽</title>
<style type="text/css">
html,body{overflow:hidden;}
body,div,h2,p{margin:0;padding:0;}
body{color:#fff;background:#000;font:12px/2 Arial;}
p{padding:0 10px;margin-top:10px;}
span{color:#ff0;padding-left:5px;}
#wrapper{position:absolute;width:300px;height:150px;background:#333;border:2px solid #ccc; cursor:move;}
</style>
</head>
<body>
<div id="wrapper">
<p>This is a box.</p>
</div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById("wrapper");
var posX,posY;
var listener = false;
oDiv.onmousedown = function(e){
e = e || window.event;
listener = true;
posX = e.clientX - parseInt(oDiv.offsetLeft);
posY = e.clientY - parseInt(oDiv.offsetTop);
return false;
};
document.onmousemove = function(e){
e = e || window.event;
if (listener == true){
oDiv.style.left = e.clientX - posX + "px";
oDiv.style.top = e.clientY - posY + "px";
}
return false;
};
document.onmouseup=function(){
listener=false;
};
}
</script>
大牛们轻拍，本人菜鸟
分享到：
相关推荐
在JavaScript的世界里，拖放（Drag and Drop）功能是一种用户交互设计，允许用户通过鼠标或触摸设备抓取一个元素并将其移动到另一个位置。在这个"Drag and Drop Inserting Text to Input Textbox with jQuery"的项目...
【标题】"js-mouse-drag:使用浏览器实践鼠标拖动功能" 在Web开发中，鼠标拖动（Mouse Drag）是一种常见的交互方式，允许用户通过...在实际应用中，还可以扩展到更复杂的交互，如多选拖动、拖放（drag and drop）等。
在JavaScript编程领域，拖拽功能（Drag and Drop）与登录验证是两个常见的需求，它们都是构建交互式Web应用的关键组成部分。下面将详细讲解这两个知识点。 首先，我们来探讨拖拽功能（Drag and Drop）。在HTML5中，...
标题“Drag & Drop Files to Delete.zip”提示我们这是一个与JavaScript相关的项目，可能涉及到文件操作，特别是拖放（Drag & Drop）功能，用于删除文件。在Web开发中，这种功能允许用户通过简单的拖放操作来处理...
在“dragAndDrop-master”这个项目中，我们可以期待看到如何将这些概念应用于实际代码中，包括设置拖放区域、监听拖放事件、处理数据移动等。项目的源代码会提供具体的实现细节，帮助我们更好地理解和学习Angular的...
"js小项目练习"这个压缩包包含了使用jQuery实现的一些常见功能的源代码，对于初学者和进阶者来说都是很好的学习资源。下面我们将详细探讨这些小项目及其背后的JavaScript和jQuery知识点。 1. **菜单**： 菜单是...
##Requirements ###angular-drag-drop.js 包为了使用 angular-drag-droplibrary，你需要在你的应用程序中安装它bower install -S angular-dragdrop 。 您还需要bower install jquery和bower install jquery-ui然后...
##Requirements ###angular-drag-drop.js 包为了使用 angular-drag-droplibrary，你需要在你的应用程序中安装它bower install -S angular-dragdrop 。 您还需要bower install jquery和bower install jquery-ui然后...
- 拖动事件（drag and drop）涉及到`dragstart`, `drag`, `dragend`等事件，这些事件需要配合`draggable`属性来实现。 5. **CSS样式**： - CSS用于控制页面的样式，包括布局、颜色、字体等。在这个项目中，CSS...
在这个压缩包文件`practice-draganddrop`中，我们可以推测其内容可能与JavaScript的拖放（Drag and Drop）功能有关。 拖放功能是网页交互中常见的一种用户友好的特性，它允许用户通过鼠标或其他输入设备将元素从一...
接下来，提到的"拖拽"功能是HTML5新增的拖放（Drag and Drop）API。通过这个API，用户可以直接用鼠标将元素拖动到其他位置。在登录页面中，可能用于调整页面布局或者图标的位置。实现拖放功能需要监听`dragstart`, `...
首先，我们需要明确几个概念：拖拽（Drag & Drop）是一种用户界面交互方式，允许用户通过鼠标或触控方式移动某个元素。而在Web开发中，实现拖拽功能需要使用到HTML5中的拖放API。而“拖拽并替换”则是在拖拽的基础上...
在文件列表中，"练习"可能是包含使用流程设计器的示例或者练习项目，而"js"目录可能包含了实现流程设计器功能的JavaScript代码。这些代码可能包括了Canvas的绘图函数、事件监听器、数据模型的定义以及与用户交互相关...
"具有自定义DnD映射"意味着这个项目实现了拖放（Drag and Drop，简称DnD）功能，允许用户通过拖动来操作地图或地图上的元素，增加了用户交互性。"专为学校项目而设计"表明这个项目是为了教育目的，可能是为了教学...
拖放（Drag and Drop）是JavaScript中的一个重要特性，它允许用户通过鼠标或其他输入设备将元素从一处移动到另一处。实现拖放功能需要监听`dragstart`、`drag`、`dragend`等事件，以及使用`DataTransfer`对象来传递...
拖放操作包括几个关键的事件：dragstart（开始拖动）、drag（拖动中）、dragend（拖动结束）、dragover（拖动到目标元素上时触发）、drop（释放目标元素时触发）。 2. HTML5中的拖拽属性： 在HTML5中，可以通过设置...
9. **拖放功能**：HTML5的drag and drop API使用户可以直接在网页上拖动元素，增强了用户体验。 10. **表单控件改进**：新的表单输入类型如color、date、time等，以及placeholder属性、required属性的引入，提高了...
8.拖放功能（Drag and Drop）：HTML5实现了拖放API，用户可以直接在网页上拖动元素，方便文件上传或内容移动。 9. Microdata和Schema.org：Microdata是一种标记数据的方式，用于增加网页的语义。与Schema.org结合...
在`react-dnd-test`项目中，我们很可能是在探索React DnD（Drag and Drop）库的应用，这是一个用于在React应用中实现拖放功能的强大工具。 首先，让我们来了解React DnD库。React DnD是一个声明式、高效且灵活的库...
2. **监听拖放事件**：JavaScript提供了`dragstart`、`drag`、`dragenter`、`dragleave`、`dragover`和`drop`等事件，可以分别处理拖动开始、拖动过程、进入/离开目标区域、拖动经过以及释放拖动元素时的行为。...