可拖动的DIV

最新推荐文章于 2024-04-21 15:55:19 发布

深沉的简单

最新推荐文章于 2024-04-21 15:55:19 发布

阅读量1.2k

点赞数 2

分类专栏： JavaScript 文章标签：可拖动的DIV

本文链接：https://blog.csdn.net/u013861109/article/details/52896700

版权

在做WEB UI设计的时候，拖动某个HTML元素已经成为一种不能忽视的用户界面模式，比较典型的应用例子就是Dialog，一个元素是怎么实现拖动的呢？其实原理非常简单，要想实现首先得了解几个基本知识。

Tips

绝对定位：只有把元素的position属性设置为absolute并且或者fixed才可以实现拖动，默认情况下元素会按文档流中的位置自行决定其出现在页面上的位置，是不能移动的，而绝对定位的元素可以使元素脱离文档流，相对于其定位的父元素或者屏幕定位，可以利用这点儿，通过改变元素与已定位父元素的位移来实现元素拖动。关于定位知识具体可以看看CSS布局 ——从display，position， float属性谈起。

鼠标事件：当鼠标按下、移动、弹起的时候都会触发相应事件，当鼠标按下的时候同时会触发相应元素click事件，并且冒泡到document，上面提到改变元素与定位父容器位移可以在这些事件中实现。关于事件相关知识可以看看JavaScript与HTML交互——事件

要拖动的Dialog

写个简易的Dialog供拖动测试使用

<!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