基于jquery的可拖动div

最新推荐文章于 2025-08-19 08:41:01 发布

转载最新推荐文章于 2025-08-19 08:41:01 发布 · 61 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liaohuolin/p/4039435.html

文章标签：

#javascript #ui #ViewUI

本文介绍了一个基于jQuery的可拖动Div实例，该实例无需依赖jQueryUI，且能实时显示鼠标坐标。通过简单的HTML和CSS代码即可实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

在线预览源码下载

实现的代码。

html代码：

  <span class="text noselect">DRAGGIN' WINDOWS<br />
        <a href="http://***">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;
        }