虽然网上又很多实现方法,但是还是需要理解拖放原理。通过绑定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
wpf,实现了鼠标拖放操作,可以像win7桌面的图标一样拖放
drag and drop 拖放库 vue dnd mobile
Window下拖放操作Drag & Drop 全解析
一套简化拖放操作的组件包,虽然很老了,不过也支持D7。
在工作当中,我们会常常见到像UC浏览器的新选项卡一样的可以自定义拖拽摆放效果。大的像淘宝的装修,QQ空间装扮等,小到一些游戏等等随处可见拖放的使用场景。...HTML5 Drag Drop 拖放例子 dragenter
安装拖放:$ bower install -S gardiner/draganddrop 在文件头中包含jQuery和拖放:< link href =' bower_components/draganddrop/src/draganddrop.css ' rel =' stylesheet ' type =' text/css '/>< ...
一篇关于文件拖放扩展的宝贵资料,介绍了IE中文件拖放的整个过程
A Drag and Drop List Control的Demo
主要为大家介绍了HTML5+CSS3实现拖放(Drag and Drop)的实现方法,需要的朋友可以参考下
ExtJS4官方指南翻译:DragandDrop拖放/Grid组件/Tree组件/容器与布局
Qt Drag Drop之拖放.zip
windows平台上实现IDropSource、IDropTarget和IDataObject接口,实现拖放功能。拖放功能包含源和目标两块,可以单独实现,也可以同时实现拖和放两个功能。
Qt之QToolButton与QGroupBox实现动态拖拽Drag、Drop功能,可以随意拖放到QGroupBox内,也可以与现有的QToolButton交换位置,也可以拖拽出QGroupBox外释放
DragAndDrop:拖放Collection从iOS学院课程查看单元格
flutter_list_drag_and_drop,列表的拖放实现,博客附件,效果请查看博客相对应项目。
npm install --save-dev @4tw/cypress-drag-drop 或纱线 yarn add --dev @4tw/cypress-drag-drop 在加载 Cypress 之前(通常在您的commands.js )放置以下行: require ( '@4tw/cypress-drag-drop' ) 或者,...
play_draganddrop 使用拖放来对页面元素进行排序-https:
day21-Drag N Drop(拖放图片)