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

转载 2006年05月27日 17:14:00

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

使用时只需绑定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

相关文章推荐

React Native布局实践:开发京东客户端首页(四)——首页功能按钮及控件封装

从我写第一篇React Native文章以来,我们几乎是把所有的代码都放在一个js文件中实现的,随着工程复杂度的增加,各种自定义控件的代码就和业务逻辑代码耦合严重,这篇文章就来解决这一问题,让我们一起...

AlertController工具类的封装,让AlertController变得更简单

国际惯例,好吧,也没什么惯例.直接说.      就是简单的写一个工具类,将AlertController封装起来,用更简单的代码书写来完成同样的功能.      首先.创建一个 NSObject...

JQuery学习—封装,让这个世界变得更简单

小编认为,JQuery就是用JavaScript封装成的一些js方法,又将这些方法封装在一起,称为JQuery。除此之外,js还有两个库就是Prototype、MooTools,这里不再多做介绍。 ...

让多语言本地化变得更简单的Xcode插件——AMLocalizedStringBuilder

写在前面一直就想写一款多语言本地化的插件,虽然网上也有很多这种类型的插件可供选择,但是总感觉用起来不够方便。一次偶然的机会接触到Android开发,觉得Android开发中直接可以使用R.string...

VB6 通过winsock控件数组实现客户端和服务器多对一通信

在VB6中使用winsock控件需要引用Microsoft Winsock Control 6.0部件使用winsock控件可以实现客户端和服务器间C/S结构的通信,如果把客户端和服务器放置于同一台电...

25_C# 实现VMS客户端——控件_总结

声明: 本博客为原创博客,主要讲述使用C#语言调用服务端SDK方式完成VMS客户端完整功能实现,转载请声明出处。如有技术问题或需交流可直接联系本人邮箱:chuiwenwei@163.com ...

24_C# 实现VMS客户端——控件_布局设计

声明: 本博客为原创博客,主要讲述使用C#语言调用服务端SDK方式完成VMS客户端完整功能实现,转载请声明出处。如有技术问题或需交流可直接联系本人邮箱:chuiwenwei@163.com ...

B/S下基于LODOP控件客户端自动打印小票

Lodop是一款专业的WEB打印控件,其设计目标是简单易用、功能足够强大,开创WEB打印开发的新局面。 Lodop设计者对WEB下的打印开发任务进行了分类汇总,高度抽象,设计出仅用几个功能函数,就可...

ActiveX (ocx)控件在客户端中使用

1.新建一个VS2008工程。 不要漏掉图中选项,当然默认是选中的。 2..在新建的对话框中添加我们自己的控件。 3.为控件添加关联变量 右键添加变量,命名m_myocx。向导会自动生...
  • hkcsdn
  • hkcsdn
  • 2016年10月24日 14:23
  • 926
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:客户端拖动控件封装(让拖动变得更简单)
举报原因:
原因补充:

(最多只允许输入30个字)