关闭

客户端拖动控件封装(让拖动变得更简单)

678人阅读 评论(0) 收藏 举报

在一些交互性强的前端页面中,经常用到物件拖动,因此封装了一下拖动控件的代码。

使用时只需绑定htc拖动控件,然后设定一些可拖动控件(其position需设为absolute)的canMove属性(为1表示可以拖动),layernum属性(拖动时,移动哪一个父元件)

<!--
Author:        Kw.Tsou
Date:        2005/11/26
Content:    为页面上的元件提供自由移动的功能
UseMark:    在body(或其它容器)上behavior此物件,然后在需要移动的物件上设置canMove = "1" ,如果不是移动本身,则可以设置layernum指向其父元素.(注意:该移动的物件的position必须为absolute)
-->
<PUBLIC:COMPONENT>
    
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="move_eDown()" />
    
<PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="move_eUp()" />
    
<PUBLIC:ATTACH EVENT="onmousemove" ONEVENT="move_eMove()" />
    
<PUBLIC:EVENT ID="moveevent"  NAME="ontagmove"/>
</PUBLIC:COMPONENT>
<SCRIPT Language="JavaScript">
    
var current = null;
    
var offsetX = 0;
    
var offsetY = 0;
    
var dragging = false;
    
var startedDragging = false;
    
var ismove = false;
    
    
function setCurrent(w)
    
{
        current 
= w;
        
if(current.style.position!="absolute"){
            alert(
"可移动物件的position必须为absolute,才可更好地移动");
            
return;
        }

        
var ex = event.clientX;
        
var ey = event.clientY;
        offsetX 
= event.x - current.offsetLeft;
        offsetY 
= event.y - current.offsetTop;
        dragging 
= true;
        ismove 
= false;
    }


    
function moveCurrent()
    
{
        
if (!dragging || !current)
            
return;
            
        
if (event.button == 0)
        
{
            releaseCurrent();
            
return;
        }

          
        
if (!startedDragging)
        
{
            startedDragging 
= true;
        }

          
        
var ex = event.clientX;
        
var ey = event.clientY;
        
var newl = ex - offsetX;
        
var newt = ey - offsetY
        
if(newl!=current.style.pixelLeft||newt!=current.style.pixelTop){
            current.style.pixelLeft 
= ex - offsetX;
            current.style.pixelTop 
= ey - offsetY;
            ismove 
= true;
        }

        
        window.event.returnValue 
= false;
        window.event.cancelBubble 
= true;
        
    }


    
function releaseCurrent()
    
{
        current
=null;
        dragging 
= false;
        startedDragging 
= false;
        window.event.returnValue 
= false;
        window.event.cancelBubble 
= true;
    }
  

    
//取得移动对象(如只能拖动标题栏进行移动)
    function getOpreateElement(el){
        
//debug();
        var ret = el;
        
var layernum = 0;
        
if(el.layernum)
            layernum 
= parseInt(el.layernum);
        
for(var i=0;i<layernum;i++)
        
{
            ret 
= ret.parentElement;
        }

        
return ret;

    }


    
function move_eDown()
    
{
        
var e = window.event;
        
var el = e.srcElement;
        
if(el.canMove=="1"){
            el 
= getOpreateElement(el);
            
if(!el.isLock){
                
if(!(el.isResize=="1"&&el.runtimeStyle.cursor.indexOf("resize")>0))
                    setCurrent(el);
            }

        }

    }


    
function move_eUp()
    
{
        
var tmp =null;
        
if(current!=null)
            tmp 
= current;
        releaseCurrent();
        
if(tmp!=null&&ismove){
            
            
var evt = createEventObject();
            evt.src 
= tmp;
            
try { moveevent.fire(evt); } catch(e) {};
        }

        ismove 
= false;
        tmp 
= null;
        
    }


    
function move_eMove()
    
{
        moveCurrent();
    }


</SCRIPT>




<html>
<head>
<title>什么都可以拖动</title>
<style>
body,div,td,font
{font:menu;}
div,td
{text-align:center}
</style>
</head>
<body style="margin:0px">
<div ontagmove="window.status=' left:' + window.event.src.offsetLeft + ' top:' + window.event.src.offsetTop" style="margin:3px;position:absolute;overflow:hidden;behavior:url(BlogMoveAble.htc);border:1px solid gray;width:90%;height:90%;background-color:#efefef">
    
<div canMove = "1" style="background-color:gray;border:1px solid red;cursor:move;top:20px;left:20px;position:absolute;width:100px;height:100px;">
        这是一个div
    
</div>
    
<div  style="background-color:#e1e1e1;border:1px solid blue;;top:120px;left:120px;position:absolute;width:180px;height:120px;">
        
<div style="height:30px;border:1px solid white;background-color:white;color:black;cursor:move" canMove="1" layernum="1">只有标题可以拖动</div>
        这是一个div
    
</div>
    
<table border="1" bordercolor="green" style="width:50%;height:50%;position:absolute">
        
<tr>
            
<td canMove="1" layernum="3" colspan="2" style="cursor:move;background-color:blue;color:white">这是表格的标题行</td>
        
</tr>
        
<tr>
            
<td>1</td>
            
<td>2</td>
        
</tr>
        
<tr>
            
<td>3</td>
            
<td>4</td>
        
</tr>
    
</table>
</div>
</body>
</html>



预览:

testmove.htm

下载:
moveable.rar

http://tsoukw.cnblogs.com/archive/2006/05/19/404333.aspx

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2284905次
    • 积分:26104
    • 等级:
    • 排名:第228名
    • 原创:1篇
    • 转载:1662篇
    • 译文:0篇
    • 评论:98条
    最新评论