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 >
     
  • 相关阅读:
    实用机器学习 跟李沐学AI
    Explicitly drop temp table or let SQL Server handle it
    dotnettransformxdt and FatAntelope
    QQ拼音输入法 禁用模糊音
    (技术八卦)Java VS RoR
    Ruby on rails开发从头来(windows)(七)创建在线购物页面
    Ruby on rails开发从头来(windows)(十三)订单(Order)
    Ruby on rails开发从头来(windows)(十一)订单(Order)
    新员工自缢身亡,华为又站到了风口浪尖
    死亡汽油弹(Napalm Death)乐队的视频和来中国演出的消息
  • 原文地址:https://www.cnblogs.com/lanzhi/p/6470637.html
Copyright © 2011-2022 走看看