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

转载 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

C# WinForm控件的拖动和缩放的实现

原文:http://www.codesky.net/article/200908/127342.html C# WinForm控件的拖动和缩放是个很有用的功能。实现起来其实很简单的,主要是设计控件的...
  • Joyhen
  • Joyhen
  • 2013年02月05日 18:03
  • 3730

重温一下ios基本控件拖动添加

今天做个小demo,因为忘记了一些基本知识(肯定是以前不够牢固),导致弄了很久 实际上就只是一个属性忘记添加而已,一个小小的IBoutlet。。。 打开storyboard(注明:现在刚刚...
  • hyichao_csdn
  • hyichao_csdn
  • 2014年12月04日 15:17
  • 719

Android控件拖动实现

1.今天突然想到做个实现个控件拖动效果,就来试试,一查原来还是很简单的2.原理就是实现OnTouchLinstener,然后触摸屏幕时改变控件的位置,当然了会有人问OnTouch与OnClick有什么...
  • qq_25327609
  • qq_25327609
  • 2017年04月16日 23:38
  • 900

html拖动控件详解

HTML5提供专门的拖拽与拖放的API,以后实现这类效果就不必乱折腾了。但是,考虑到Opera浏览器似乎对此不感冒,在通用性上有待商榷,所以这里也就简单说一说。 二、相关重点 DataTransf...
  • ITzhongzi
  • ITzhongzi
  • 2016年07月14日 21:13
  • 850

可在屏幕上随意拖动的控件

源码下载地址:1.首先新建一个工具类MoveViewUtils,创建一个静态方法setMoveView(Context context, final View view)来设置要移动的控件,在方法中给...
  • qq_20489601
  • qq_20489601
  • 2016年08月01日 11:30
  • 327

WinForm之控件拖动总结(原理篇)

WinForm之控件拖动总结(原理篇)     这几天在公司做项目涉及到了Winform的中涉及到控件项拖动的功能实现,比如TreeView中的项拖动添加到ListView中等。以前...
  • SunCherryDream
  • SunCherryDream
  • 2014年03月07日 11:59
  • 2947

C# WinForm控件的拖动和缩放的实现

转自:http://blog.csdn.net/joyhen/article/details/8572505 C# WinForm控件的拖动和缩放是个很有用的功能。实现起来其实很简单的,主要是设...
  • u012252959
  • u012252959
  • 2016年01月22日 17:23
  • 2431

Android-满屏幕拖动的控件

今天做个有意思的效果吧,控件的拖拽,先看一下模拟器运行: 也就是,用户可以随心所欲的拖动控件,布局文件很简单就是一个Button控件: xml version="1.0...
  • SuperCopa
  • SuperCopa
  • 2016年08月22日 11:12
  • 3074

Android拖动控件的实现,自定义可拖动的LinearLayout

工作内容; 1.拖动控件 2.自定义可拖动的LinearLayout 学习分享: 一、拖动控件的实现步骤: 【前提:控件在RelativeLayout中,或者在GridLayout中】 1.按下图搞...
  • yingtian648
  • yingtian648
  • 2016年10月07日 18:31
  • 4631

winform 可拖动的自定义Label控件

效果预览: 可拖动的自定义Label控件" title="winform 可拖动的自定义Label控件" style="margin:0px; padding:0px; border:0px;...
  • a1061747415
  • a1061747415
  • 2015年08月14日 08:35
  • 2622
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:客户端拖动控件封装(让拖动变得更简单)
举报原因:
原因补充:

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