zoukankan      html  css  js  c++  java
  • 网页模块拖动

    <HTML>
    <HEAD>
    <TITLE>仿Google和Windows Live的拖拽</TITLE>
    <style type="text/css">
    body
    {
        margin:10px;
    }
    #dragHelper
    {
        position:absolute;/*重要*/
        border:2px dashed #000000;
        background-color:#FFFFFF;
    filter: alpha(opacity=30);
    }
    .normal
    {
        position:absolute;/*重要*/
        width:300px;
        #height:10px;
        border:1px solid #666666;
        background-color:#FFFFFF;
    }
    .over
    {
        position:absolute;/*重要*/
        width:300px;
        #height:10px;
        border:1px solid #666666;
        background-color:#f3f3f3;
    filter: alpha(opacity=50);
    }
    .dragArea {
    CURSOR: move;
    }
    </style>
    </HEAD>
    <BODY oncontextmenu="window.event.returnValue=false">
    <input type="text" id="evt" name="eventValue" size="40" />
    <div id="dragHelper" style="display:none"></div>
    <div class="normal" overClass="over" dragClass="normal">
        <table width="100%">
            <tbody>
                <tr bgcolor="#CCCCCC" bar="yes"><td><a href="#">baidu.com</a></td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr>
                <tr><td colspan="3">地址:http://www.baidu.com</td></tr>
                <tr><td colspan="3">关键字:</td></tr>
                <tr><td colspan="3">说明:</td></tr>
            </tbody>
        </table>
    </div>
    <div class="normal" overClass="over" dragClass="normal">
        <table width="100%">
            <tbody>
                <tr bgcolor="#CCCCCC" bar="yes"><td>新浪</td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr>
                <tr><td colspan="3">地址:http://www.sina.com.cn</td></tr>
                <tr><td colspan="3">关键字:</td></tr>
                <tr><td colspan="3">说明:</td></tr>
            </tbody>
        </table>
    </div>
    <div class="normal" overClass="over" dragClass="normal">
        <table width="100%">
            <tbody>
                <tr bgcolor="#CCCCCC" bar="yes"><td>源码</td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr>
                <tr><td colspan="3">地址:http://www.codefans.net</td></tr>
                <tr><td colspan="3">关键字:</td></tr>
                <tr><td colspan="3">说明:</td></tr>
            </tbody>
        </table>
    </div>
    <div class="normal" overClass="over" dragClass="normal">
        <table width="100%">
            <tbody>
                <tr bgcolor="#CCCCCC" bar="yes"><td>QQ</td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr>
                <tr><td colspan="3">地址:http://www.qq.com</td></tr>
                <tr><td colspan="3">关键字:</td></tr>
                <tr><td colspan="3">说明:</td></tr>
            </tbody>
        </table>
    </div>
    </BODY>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var dragObjs = [];//可以拖拽的元素数组
    var dragObjTops = [];
    var dragHelper = document.getElementById("dragHelper");//拖拽时位置框
    var dragObj = null;//拖拽对象元素
    var dragObjPos = 0;
    var dragObjOffset = {left:0,top:0};//拖拽对象原始位置
    var mouseInDragObjOffset = {x:0,y:0};//鼠标在拖拽对象中的相对位置
    var initHeight = 40;
    Number.prototype.NaN0=function(){return isNaN(this)?0:this;}
    function getPosition(e){//获取元素相对文档的绝对位置
        var left = 0;
        var top  = 0;
        while (e.offsetParent){
            left += e.offsetLeft;
            top  += e.offsetTop;
            e     = e.offsetParent;
        }
        left += e.offsetLeft;
        top  += e.offsetTop;
        return {x:left, y:top};
    }
    function mouseCoords(ev){//获取鼠标相对文档的绝对位置
        if(ev.pageX || ev.pageY){
            return {x:ev.pageX, y:ev.pageY};
        }
        return {
            x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
            y:ev.clientY + document.body.scrollTop  - document.body.clientTop
        };
    }
    function getMouseOffset(target, ev){//获取鼠标相对元素的相对位置
        ev = ev || window.event;
        var elementPos    = getPosition(target);
        var mousePos  = mouseCoords(ev);
        return {x:mousePos.x - elementPos.x, y:mousePos.y - elementPos.y};
    }
    function mouseDown(ev){
        ev = ev || window.event;
        target = ev.srcElement || ev.target;
        if(dragObj){
            return;
        }
        var dragArea = false;
        if(target.getAttribute("dragArea")){
            dragArea = true;
        }
        while(!target.getAttribute("isDragObj")){
            if(target.tagName=="HTML")
                break;
            target = target.parentNode;
        }
        if(dragArea && target.getAttribute("isDragObj")){
            dragObj = target;
            //重写的目的是让当前对象在最上层
            document.body.removeChild(dragObj);
            document.body.appendChild(dragObj);
            //记录下拖拽对象原始位置
            dragObjOffset.left = dragObj.style.left;
            dragObjOffset.top = dragObj.style.top;
            dragObj.className = dragObj.getAttribute("overClass");
            //鼠标在拖拽对象中的相对位置
            mouseInDragObjOffset = getMouseOffset(dragObj, ev);
            dragHelper.style.left = dragObj.style.left;
            dragHelper.style.top = dragObj.style.top;
            dragHelper.style.width = dragObj.offsetWidth;
            dragHelper.style.height = dragObj.offsetHeight;
            dragHelper.style.display = "";
            //alert(dragObj.offsetWidth+":"+dragObj.clientWidth);
        }
    }
    function mouseUp(ev){
        ev = ev || window.event;
        target = ev.srcElement || ev.target;
        if(dragObj){
            dragObj.style.left = dragHelper.style.left;
            dragObj.style.top = dragHelper.style.top;
            dragHelper.style.display = "none";
            dragObj.className = dragObj.getAttribute("dragClass");
            dragObj = null;
        }
    }
    function mouseMove(ev){
        ev = ev || window.event;
        if(dragObj) {
            var mousePos = mouseCoords(ev);        
            /*dragHelper.style.left = dragObjOffset.left;
            dragHelper.style.top = dragObjOffset.top;
            dragHelper.style.width = dragObj.offsetWidth;
            dragHelper.style.height = dragObj.offsetHeight;
            dragHelper.style.display = "";*/
            var windowWidth = document.body.offsetWidth;//窗口宽度
            var windowHeight = document.body.offsetHeight;//窗口高度
            //拖拽对象应该所在当前位置
            var dragObjLeft = mousePos.x - mouseInDragObjOffset.x;
            var dragObjTop  = mousePos.y - mouseInDragObjOffset.y;
            //增加判断,不然拖拽对象拖出浏览器窗口
            if(dragObjLeft >= 0 && dragObjLeft <= windowWidth - dragObj.offsetWidth - 20)
                dragObj.style.left = dragObjLeft;
            if(dragObjTop >=0)
                dragObj.style.top = dragObjTop;
            repaint();
        }
    }
    //克隆对象
    function cloneObject(srcObj, destObj){
        destObj = srcObj.cloneNode(true);
    }
    function makeDraggable(element){
        element.setAttribute("isDragObj", "y");
    }
    function repaint(){
        for(i=0; i<dragObjs.length; i++){
            if(dragObjs[i] == dragObj){
                dragObjPos = i;
                dragObjs[i] = dragHelper;
                break;
            }
        }
        if(dragObjPos>0 && parseInt(dragObj.style.top)<parseInt(dragObjs[dragObjPos-1].style.top)){
            dragObjs[dragObjPos] = dragObjs[dragObjPos-1];
            dragObjs[dragObjPos-1] = dragHelper;
            dragObjPos = dragObjPos - 1;
        }
        if(dragObjPos<dragObjs.length-1 && parseInt(dragObj.style.top)>parseInt(dragObjs[dragObjPos+1].style.top)){
            dragObjs[dragObjPos] = dragObjs[dragObjPos+1];
            dragObjs[dragObjPos+1] = dragHelper;
            dragObjPos = dragObjPos + 1;
        }
        paintDragObjs();
        dragObjs[dragObjPos] = dragObj;
    }
    function paintDragObjs(){
        var h = 40;
        for(i=0; i<dragObjs.length; i++){
            dragObjs[i].style.left = 20;
            dragObjs[i].style.top = h;
            h += dragObjs[i].offsetHeight + 10;
        }
    }
    function openClose(obj){
        obj.innerHTML = obj.innerHTML=="-"?"+":"-";
        while(obj.tagName != "TBODY"){
            obj = obj.parentNode;
        }
        for(i=0; i<obj.childNodes.length; i++){
            if(obj.childNodes[i].nodeName == "#text" 
                || obj.childNodes[i].getAttribute("bar")){ continue; }
            obj.childNodes[i].style.display=obj.childNodes[i].style.display==""?"none":"";
        }
        paintDragObjs();
    }
    document.onmousedown = mouseDown;
    document.onmouseup = mouseUp;
    document.onmousemove = mouseMove;
    window.onload = function(){
        var objs = document.getElementsByTagName("Div");
        for(i=0; i<objs.length; i++){
            var item = objs.item(i);
            //if(i==1)item.style.height=150;
            if(item.getAttribute("overClass")){
                makeDraggable(item);
                dragObjs.push(item);
                item.style.left = 20;
                item.style.top = initHeight;
                dragObjTops.push(initHeight);
                initHeight += item.offsetHeight + 10;
            }
        }
    //    dragHelper = document.createElement('DIV');
    //    dragHelper.style.cssText = 'position:absolute;display:none;';
    //    document.body.appendChild(dragHelper);
    }
    //-->
    </SCRIPT>
    </HTML>
  • 相关阅读:
    57.适合自己的就是最好的
    45.懂得放弃
    ASP.NET碎知识点
    app性能测试理论基础一篇
    记一次踩坑docker+Jenkins+python3.6.8+gitee
    IT测试人从浓密到稀疏的的发量之路
    一天基本上没什么效率
    如此复杂的心情,如此失落的感觉…
    String.Replace 方法 (String, String)
    《见与不见》原题《班扎古鲁白玛的沉默》 作者:扎西拉姆·多多
  • 原文地址:https://www.cnblogs.com/fumj/p/2686886.html
Copyright © 2011-2022 走看看