//-------------------------------------------------------------------这里只是吐槽！~------------------------------------------------------------------
啊哈，这是第一次来博客园里写博客喃。当然也是我的第一篇博客啦= =！很有纪念意义。。。。哈哈哈哈哈哈哈哈。。。（PS：这样笑的时候经常被喷呀= =！）。
好了，其实我写博客的目的还是为了记录我的学习，我的经历，我的生活嘛。当然我也是记录一下学习到的知识，不然久了忘了就找不到地方复习了= =。。
难道已经有人在吐槽我的注释了？( ⊙ o ⊙ )！哈哈，我的读者哪有这么可爱！
//-------------------------------------------------------------------以下是正文--------------------------------------------------------------------------
今天是2014-3-14，也是实训的第二周结束了。相比第一周的项目设计来看，第二周做了下来发现第一周的设计简直无情。要是拓展的话确实有很多地方都可以拓展呀！但毕竟我的数据库设计是硬伤，这主要是源于一开始的需求分析不到位（好吧我承认这是自己给自己找事，一开始就做好不就行了么！）。但不管是千里马还是断脚马，始终还是要跑下去的。
在指导老师的指点下，让我做一个悬浮窗来显示信息和提交按钮，来增加用户体验。嗯...深思中。。于是果断到百度上去找了相关的代码。。但是尼玛居然用不了= =！这不是坑是什么。。而且很多都还是转的同一篇= =！泪目。好吧，经过了一点修改，解决了显（语）在（法）错误后终于实现了Div的拖拽，Div的定位。为什么我不用和或者顿号喃！因为网上给的代码只能实现单一项功能，而且还不能满足要求。于是勤（不）奋（思）好（进）学（取）的我就开始潜心研究。最终，在我的淫威之下还是将其败倒。最后得到的代码如下：
//-----------------------------------------------------------------代码部分----------------------------------------------------------------------------
code:dragDiv.js
// 实现可拖动的div-----------------------------------拖拽部分------------------------------------- var px = 0; var py = 0; var begin = false; //是否要开启透明效果 var enableOpacity = false; // 默认不允许 var myDragDiv; var docuTopTemp = 0;//上一次的滚轮高度，初始情况下是0 var DivId = "elementToDrag"//这里是要拖拽div的id var divWidth = parseInt(document.getElementById(DivId).style.width.split('p')[0]); var divheigth = parseInt(document.getElementById(DivId).style.height.split('p')[0]); //要移动的div加上οnmοusedοwn="down(this)"即可 //鼠标按下时获取相对坐标 function down(oDiv) { myDragDiv = oDiv; begin = true; oDiv.style.cursor = "hand"; event.srcElement.setCapture(); px = oDiv.style.pixelLeft - event.x; py = oDiv.style.pixelTop - event.y; } //鼠标移动时div的相对坐标随鼠标的坐标变化而变化 document.οnmοusemοve=function() { if (myDragDiv != null && typeof (myDragDiv) != "undefined") { if (begin) { if (enableOpacity) { myDragDiv.style.filter = "Alpha(opacity=30)"; } // 滤镜 //越界判断 if (event.x <= document.documentElement.clientWidth - divWidth && event.x >= divWidth && event.y <= document.documentElement.clientHeight+docuTopTemp-divheigth && event.y >= divheigth + docuTopTemp) { myDragDiv.style.pixelLeft = px + event.x; myDragDiv.style.pixelTop = py + event.y; } } } } //鼠标抬起时释放 document.onmouseup = 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; } } //-------------------------------------------定位部分------------------------------------------------------ //定位采用滚动条滚动事件 //原理是先判断滚动条的动作，如果向下，则div也向下，向上同理 //移动的距离则是滚动条的高值相对于上一次高值的差，初始高值为0，下加上减 document.onscroll = function () { var docuTop = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop; var divTopBar = document.getElementById(DivId);//DivId=elementToDrag是对象id divTopBar.style.pixelTop += (docuTop - docuTopTemp); docuTopTemp = docuTop; } //--------------------------------------------加载部分------------------------------------------ //设置div的初始位置 function MoveFloatLayer() { var x = document.documentElement.clientWidth * 0.8; var y = document.documentElement.clientHeight * 0.1; var docuTop = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop; var y = docuTop + y; var divTopBar = document.getElementById(DivId); divTopBar.style.pixelLeft = x; divTopBar.style.pixelTop = y; } window.onload = MoveFloatLayer; View Code
code:test.aspx 因为我是做.net开发的，所以就用的asp.net，但这是js代码，所以都可以用，这里只是举例。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <form id="form1" runat="server"> <div id="elementToDrag" onmousedown="down(this)" style="position: absolute; width: 160px; height: 100px; z-index: 1; background: #cef"> 按下鼠标拖动 </div> <div> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> test test test<br /> </div> </form> </body> <script src="Script/dragDiv.js"></script><%--必须放在后面加载，因为要获取div的属性，所以放在前面会报错的。--%> </html> View Code
好了具体的代码就是上面的了，根据实际情况去用就OK了。第一期就到这里吧。
转载于:https://www.cnblogs.com/SunLingKY/p/3601286.html
相关资源：js实现悬浮可拖动登录窗口(demo)