虽然网上又很多实现方法，但是还是需要理解拖放原理。通过绑定onmousedown,onmousemove.onmouseup事件来实现层拖放位置变化，这只是很简单实现，可以去换个方法去实现。
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style>
.drag1 , .drag2{
position:relative;
width:200px;
height:200px;
line-height: 200px;
text-align: center;
vertical-align: middle;
border-radius: 5px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="drag1" class="drag1">
drag layer
</div>
</body>
<script>
// drag and drap class
function DND(el){
_startX = 0; // mouse starting positions
_startY = 0;
_offsetX = 0; // current element offset
_offsetY = 0;
_dragElement = el; // needs to be passed from OnMouseDown to OnMouseMove
_oldZIndex = 0; // we temporarily increase the z-index during drag
}
DND.prototype = {
init : function(){
var _this = this;
//replace with adeventListeners or attachEvent
document.onmousedown = function(e){_this.onMouseDown(e)};
document.onmouseup = function(e){_this.onMouseUp(e)};
},
onMouseDown: function(e){
var even = e ? e : window.event;
var target = e.target ? e.target : e.srcElement;
if(e.button == 1 || e.button == 0){
_startX = even.clientX;
_startY = even.clientY;
_offsetX = this.parseMumber(target.style.left);
_offsetY = this.parseMumber(target.style.top);
_oldZindex = target.style.zIndex;
_dragElement = target;
//replace with adeventListeners or attachEvent
document.onmousemove = this.onMouseMove;
// cancel out any text selections
document.body.focus();
// prevent text selection in IE
document.onselectstart = function () { return false; };
// prevent IE from trying to drag an image
target.ondragstart = function() { return false; };
return false;
}
},
onMouseMove: function(e){
var e = e ? e : window.event;
_dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';
_dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';
_dragElement.style.cursor ="move";
},
onMouseUp: function(e){
if(_dragElement){
//replace with adeventListeners or attachEvent
document.onmousemove = null;
document.onselectstart = null;
_dragElement.ondragstart = null;
_dragElement.style.cursor ="";
_dragElement = null;
}
},
parseMumber: function(value){
var n = parseInt(value);
return isNaN(n) ? 0 : n;
}
};
var dd1 = new DND(document.getElementById("drag1")).init();
</script>
</html>
参考:
http://www.cnblogs.com/Godblessyou/archive/2008/05/14/1196746.html
http://www.webreference.com/programming/javascript/mk/column2/
http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx
http://www.quirksmode.org/js/dragdrop.html
分享到：
相关推荐
qt实现拖放文件到界面上，获取内容等 Qt 文件的拖放 drag - drop。该文章的demo的源码 https://blog.csdn.net/linbounconstraint/article/details/107518650
在Windows Presentation Foundation (WPF) 中，鼠标拖放操作（DragAndDrop）是一种常见的用户交互方式，它允许用户通过鼠标将一个元素从一处移动到另一处。这种功能在各种应用程序中都有广泛的应用，例如文件管理器...
《Drag and Drop Component Suite 3.7：Delphi中的拖放技术详解》 在软件开发过程中，用户界面的易用性和交互性是至关重要的因素之一。"Drag and Drop Component Suite 3.7"是一个专为Delphi开发者设计的组件包，它...
在Android开发中，拖放（Drag and Drop）功能是一种常见的用户交互方式，允许用户通过手势将一个对象从一处移动到另一处。这个功能在许多场景下都非常实用，比如整理应用抽屉、移动文件或者在布局中调整控件位置等。...
在Android开发中，拖放（DragAndDrop）功能是一个常用且有趣的交互方式，它允许用户通过手势将一个视图移动到另一个位置，或者在不同的视图之间传递数据。本示例将详细介绍如何实现一个简单的拖放操作，并解决你在...
Vue DnD Mobile，全称为"Vue Drag and Drop Mobile"，是专门为Vue.js开发的一个拖放库，专为移动设备优化，使得在触摸屏上的交互变得更加自然和流畅。 拖放（Drag and Drop，简称DnD）是一种常见的用户交互模式，...
在现代Web开发中，拖放（Drag and Drop）API提供了一种直观的方式来处理用户与网页元素之间的交互。通过使用HTML5的拖放API，开发者可以实现元素在页面上的拖动和放置，从而增强用户体验。本文将详细介绍如何在...
在IT行业中，文件拖放（Drag and Drop）是一种常见的用户交互技术，允许用户通过鼠标将一个元素从一处拖动到另一处，常用于文件管理、应用程序界面操作等场景。本资料"DragandDrop.rar_dragAndDrop"聚焦于在Internet...
【标题】"DragAndDrop_Demo源码"是关于C++编程的一个实例，主要展示了拖放（Drag and Drop）功能的实现。在计算机图形用户界面（GUI）开发中，拖放功能允许用户通过鼠标或其他输入设备将一个对象从一处拖动到另一处...
在Windows操作系统中，拖放（Drag and Drop）是一种常见的用户交互技术，允许用户通过鼠标将一个对象从一处“拖”到另一处“放”，以执行各种操作，如移动文件、复制数据或在应用程序之间传递信息。Windows API 提供...
在C#编程中，Drag and Drop操作是一种常见且实用的功能，允许用户通过鼠标将对象从一个位置拖动到另一个位置，比如在不同的控件、窗口甚至应用程序之间移动数据。这个功能在开发桌面应用时，特别是在文件管理或者...
Window 下拖放操作 Drag & Drop 全解析 Windows 操作系统中拖放操作（Drag & Drop）是一种常用的用户交互方式，允许用户在不同的程序窗口之间、同一个程序的不同窗口之间或同一程序同一窗口的不同控件之间进行移动...
"DragAndDrop_src源码" 是一个专门针对C++编程语言设计的项目，它提供了实现拖放（Drag and Drop）功能的源代码。在Windows应用开发中，拖放操作是常见的用户交互方式，允许用户通过鼠标将一项内容从一处拖动到另一...
"Drag and Drop Component Suite Version 5.2 Full Source" 是一个专门用于开发具有拖放功能的组件套件的完整源代码版本。这个组件库通常是为了帮助程序员在应用程序中实现更直观、用户友好的交互设计而设计的。在这...
拖放（Drag and Drop）功能就是这样的一个特性，它使得用户可以通过鼠标简单地移动对象来完成一系列操作。对于Delphi开发者来说，"The Drag and Drop Component Suite for Delphi XE10"是一款非常实用的工具，它极大...
标题 "Ole Drag and Drop Example" 提供了一个关于如何在应用程序中实现OLE拖放操作的示例。在编程中，OLE（Object Linking and Embedding）是微软开发的一种技术，允许不同应用程序之间的数据共享和交互。拖放功能...
HTML5是现代网页开发的重要标准，它引入了许多新特性，其中拖放（Drag and Drop）功能就是一项增强用户交互体验的重要接口。拖放接口允许用户通过鼠标或触控设备将元素从一个位置拖动到另一个位置，使得网页的互动性...
Shell Drag and Drop for .NET 是一个专为.NET框架设计的组件，它允许开发者在Windows应用程序中实现更加丰富和直观的拖放操作。这个组件的独特之处在于它能够在拖放过程中显示一个图片来呈现拖动的轨迹，提升了用户...
在工作当中，我们会常常见到像UC浏览器的新选项卡一样的可以自定义拖拽摆放效果。大的像淘宝的装修，QQ空间装扮等，小到一些游戏等等随处可见拖放的使用场景。...HTML5 Drag Drop 拖放例子 dragenter
在Web开发中，拖放（Drag and Drop）功能是一项常用的技术，允许用户通过鼠标操作将元素从一处拖动到另一处，实现数据移动或交互。在这个实例中，“Draganddrop.html”很可能是一个演示了如何在HTML页面上实现拖放...