zoukankan      html  css  js  c++  java
  • web拖动Drag&Drop原理

    < html >
    < head >
    < title > Page Title </ title >
    < style >

    .drag 
    {
        cursor
    :  move ;
    }




    .box 
    {
        margin
    :  0px ;
        width
    :  200px ;
        border
    :  1px solid #ccc ;
    }

    .box h3.title 
    {
        margin
    :  0px ;
        width
    :  100% ;
        background-color
    :  #ccc ;
    }

    .box div.content 
    {
        margin
    :  0px ;
        width
    :  100% ;
        text-align
    :  left ;
    }

    </ style >

    < script  type ="text/javascript" >
    // GreatGhoul
    //
    兼容ff, ie
    //
    要拖动的对象的title设置为'dragable'
    //
    拖动点的class设置为'drag',拖动点必须为可拖动对象的子节点

    var  DragableObj  =   {
        handle: 
    null ,
        dx: 
    0 ,
        dy: 
    0 ,

        init: 
    function (e)  {
            e 
    =  e  ||  event;
            
    this .handle  =  e.target  ||  e.srcElement;
            
    if  ( this .handle.className.indexOf( ' drag ' ==   - 1 return ;
             while  ( this .handle.tagName  !=   ' HTML '   &&   this .handle.title  !=   " dragable "
               {
                
    this .handle  =   this .handle.parentNode  ||   this .handle.parentElement;
            }

            
    if  ( this .handle.title  !=   ' dragable ' return ;
            
    this .handle.style.position  =   ' relative ' ;
            
    this .dx  =  parseInt( this .handle.style.left  +   0 -  e.clientX;
            
    this .dy  =  parseInt( this .handle.style.top   +   0 -  e.clientY;
            document.onmousemove 
    =  DragableObj.drag;
        }
    ,
        drag: 
    function (e)  {
            e 
    =  e  ||  event;
            
    if  ( this .handle  !=   null {
                
    this .handle.style.left  =  (e.clientX  +   this .dx)  +   ' px ' ;
                
    this .handle.style.top   =  (e.clientY  +   this .dy)  +   ' px ' ;
            }

        }
    ,
        drop: 
    function (e)  {
            
    this .handle  =   null ;
            document.onmousemove 
    =   null ;
        }

    }
    ;
    document.onmousedown 
    =  DragableObj.init;
    document.onmouseup   
    =  DragableObj.drop;
    document.onselectstart 
    =   function (e)  {
        e 
    =  e  ||  event;
        eo 
    =  e.target  ||  event.srcElement;
        
    if  (eo.className.indexOf( ' drag ' !=   - 1 return   false ;
    }
    ;

    </ script >
    </ head >
    < body >
    < br > 例1:
    < div  class ="box"  title ="dragable" >
    < h3  class ="drag title" >拖动标题 </ h3 >
    < div  class ="content" >内容 </ div >
    </ div >

    < br > 例2:
    < div  class ="drag"  title ="dragable" > 拖动我 </ div >

    </ body >
    </ html >
     
  • 相关阅读:
    PHP 使用 GET 传递数组变量
    Java实现 蓝桥杯 算法训练 数据交换
    Java实现 蓝桥杯 算法训练 数据交换
    Java实现 蓝桥杯 算法训练 数据交换
    Java实现 蓝桥杯 算法训练 景点游览
    Java实现 蓝桥杯 算法训练 景点游览
    Java实现 蓝桥杯 算法训练 景点游览
    Java实现 蓝桥杯 算法训练 二进制数数
    Java实现 蓝桥杯 算法训练 二进制数数
    Java实现 蓝桥杯 算法训练 二进制数数
  • 原文地址:https://www.cnblogs.com/lanzhi/p/6470637.html
Copyright © 2011-2022 走看看