昨天给大家介绍了，今天要给大家分享一款基于jquery的可拖动div。这款可拖动div只要引用jquery就可以，无需引用jquery ui。还实时记录的鼠标的坐标。一起看下效果图吧。

   

实现的代码。

html代码：

DRAGGIN' WINDOWS
        This is an old one. Click HERE for access the newer one.    
     
        
      
                   Header        
      
        
      
                   The Cords        
      
    
     

css代码：

.noselect        {
               -webkit-touch-callout: none;            -webkit-user-select: none;            -khtml-user-select: none;            -moz-user-select: none;            -ms-user-select: none;            user-select: none;        }                html        {
               width: 100%;            height: 100%;        }                body        {
               background: radial-gradient(#ACBEC8, #3A4E57);            margin: 0;            width: 100%;            height: 100%;            font-family: 'Raleway' , sans-serif;        }                        .testtext        {
               width: 100%;            color: white;            text-align: center;            display: inline-block;            padding-top: 30vh;            font-size: 48px;            text-shadow: 0 0 6px #333;        }                .text        {
               width: 100%;            color: white;            text-align: center;            display: inline-block;            padding: 40px 0;            font-size: 48px;            line-height: 30px;        }                .text a        {
               text-decoration: none;            font-size: 15px;            line-height: 20px;            color: white;        }                .window        {
               width: 500px;            height: 300px;            background: #181818;            margin-left: -250px;            left: 50%;            position: absolute;        }                .pew        {
               width: 100%;            height: 30px;            text-align: center;            line-height: 30px;            color: #111;            background: #E31836;            cursor: default;        }                .container        {
               width: 100%;            height: calc(100% - 30px);            color: #eee;            padding: 35px 0 0 0;            text-align: center;            font-size: 36px;        }

注：本文原创文章，转载请注明原文地址：