登录
0800800.com
    
 频道栏目

 查询

标题 内容

 最新评论

 最新图库

 博客统计
  • 今日数:0
  • 文章数:587
  • 收藏数:4
  • 图片数:67
  • 评论数:94
  • 开设时间:2006-3-2
  • 更新时间:2019年12月8日

  •  网友正查看的网页

     友情链接


    2017-9-6 22:06:36   晴天 
    开新窗口访问该主题 可拖动的DIV
    程序代码
    <!DOCTYPE html>
    <html>
    <head>
    <title>Test</title>
    <style type="text/css" >
    html,body
    {
    height:100%;
    width:100%;
    padding:0;
    margin:0;
    }
    .dialog
    {
    width:250px;
    height:250px;
    position:absolute;
    background-color:#ccc;
    -webkit-box-shadow:1px 1px 3px #292929;
    -moz-box-shadow:1px 1px 3px #292929;
    box-shadow:1px 1px 3px #292929;
    margin:10px;
    }
    .dialog-title
    {
    color:#fff;
    background-color:#404040;
    font-size:12pt;
    font-weight:bold;
    padding:4px 6px;
    cursor:move;
    }
    .dialog-content
    {
    padding:4px;
    }
    </style>
    </head>
    <body>
    <div id="dlgTest" class="dialog">
    <div class="dialog-title">Dialog</div>
    <div class="dialog-content">
    This is a draggable test.
    </div>
    </div>
    <script type="text/javascript">
    var Dragging=function(validateHandler){ //参数为验证点击区域是否为可移动区域,如果是返回欲移动元素,负责返回null
    var draggingObj=null; //dragging Dialog
    var diffX=0;
    var diffY=0;
    function mouseHandler(e){
    switch(e.type){
    case 'mousedown':
    draggingObj=validateHandler(e);//验证是否为可点击移动区域
    if(draggingObj!=null){
    diffX=e.clientX-draggingObj.offsetLeft;
    diffY=e.clientY-draggingObj.offsetTop;
    }
    break;
    case 'mousemove':
    if(draggingObj){
    draggingObj.style.left=(e.clientX-diffX)+'px';
    draggingObj.style.top=(e.clientY-diffY)+'px';
    }
    break;
    case 'mouseup':
    draggingObj =null;
    diffX=0;
    diffY=0;
    break;
    }
    };
    return {
    enable:function(){
    document.addEventListener('mousedown',mouseHandler);
    document.addEventListener('mousemove',mouseHandler);
    document.addEventListener('mouseup',mouseHandler);
    },
    disable:function(){
    document.removeEventListener('mousedown',mouseHandler);
    document.removeEventListener('mousemove',mouseHandler);
    document.removeEventListener('mouseup',mouseHandler);
    }
    }
    }

    function getDraggingDialog(e){
    var target=e.target;
    while(target && target.className.indexOf('dialog-title')==-1){
    target=target.offsetParent;
    }
    if(target!=null){
    return target.offsetParent;
    }else{
    return null;
    }
    }
    Dragging(getDraggingDialog).enable();
    </script>
    </body>
    </html>

    点击查看效果
    Admin 发表于 代码 | 评论(0) | 阅读(168)


    评论

    您的昵称:
    文章内容:
        您可以使用[Ctrl+Enter]或[Alt+S]来提交