背景：近期项目中需要实现弹出浮层增加数据，并且浮动层可以拖拽
解决步骤：1、浮动层实现 2、拖拽实现
多方查资料，基本实现功能，现做demo，便于以后使用
先上图片大体展示实现效果：
再上代码，展示我的实现思路：
DragAndDrop.html
浮动层拖拽 浮动层
底层页面
DragDiv.js
/** * 浮层拖拽 */var px = 0;var py = 0;var begin = false;//是否要开启透明效果var enableOpacity = false; // 默认不允许var myDragDiv;/** * 浮层拖拽 * @param divid 待拖拽对象id */function down(divid) { myDragDiv=document.getElementById(divid);//获得被拖拽对象 begin = true; myDragDiv.style.cursor = "hand"; event.srcElement.setCapture(); px = myDragDiv.style.pixelLeft - event.x;//pixelLeft py = myDragDiv.style.pixelTop - event.y;}document.οnmοusemοve=function() { if (myDragDiv != null && typeof (myDragDiv) != "undefined") { if (begin&&(px + event.x)>10) { if (enableOpacity) { myDragDiv.style.filter = "Alpha(opacity=30)"; } // 滤镜 myDragDiv.style.pixelLeft = px + event.x; myDragDiv.style.pixelTop = py + event.y; } }}document.οnmοuseup=function() { if (myDragDiv != null && typeof (myDragDiv) != "undefined") { begin = false; if (enableOpacity) { myDragDiv.style.filter = "Alpha(opacity=100)"; } // 滤镜 myDragDiv.style.cursor = "default"; event.srcElement.releaseCapture(); myDragDiv = null; }} UploadFile.css
@CHARSET "UTF-8";#dragAndDrop{ margin: 0 auto; width: 300px; height: 200px; margin-top:200px; text-align:center; background:#98fb98 ; border: 2px solid black;}/*文件整体大小*/#shadow2{ display: none; background:white; opacity:0.2; filter:alpha(opacity=20); position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:996;/*z-index position display 共同实现层的浮动 */ margin: 0 auto;}/*移动浮层*/.moveFile{ display: none; width: 150px; height: 160px; position: absolute; z-index:997; border: 2px solid black; background:#FFF; top:50%; margin-top:-50px; left:50%; margin-left:-50px;}.toolbarHeight{ height: 25px; width: 100%; border-bottom:#b7e3f2 1px solid; background:#98fb98 ;}.toobarBtn{ float: right; margin-right: 10px;}.fucengDiv{ width:100%; height: 30px; padding-top: 5px; border-top:#b7e3f2 1px solid;}
注：拖拽的实现是在网上查资料找到的，做了一些小的改动，大意了忘记留下学习地址了
以上使用到的代码，看着还是比较简单的，但是你理解吗？至少我还是有问题的
问题：
首次拖拽总是不灵活，需要多晃动几次鼠标才有效，为什么呢？待解决