SunLingKY

  

  //-------------------------------------------------------------------这里只是吐槽!~------------------------------------------------------------------

  啊哈,这是第一次来博客园里写博客喃。当然也是我的第一篇博客啦= =!很有纪念意义。。。。哈哈哈哈哈哈哈哈。。。(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加上onmousedown="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.onmousemove=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了。第一期就到这里吧。

分类:

技术点:

相关文章: