首页 > 代码库 > 基于jquery的可拖动div

基于jquery的可拖动div

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

在线预览   源码下载

实现的代码。

html代码:

  <span class="text noselect">DRAGGIN‘ WINDOWS<br />        <a href="http://www.w2bc.com">This is an old one. Click HERE for access the newer one.</a></span>    <div class="window noselect">        <div class="pew">            Header        </div>        <div class="container">            The Cords        </div>    </div>

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;        }

注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/8756

基于jquery的可拖动div