jQuery拖拽代码drag

最新推荐文章于 2023-07-30 10:00:32 发布

白鹭凡

最新推荐文章于 2023-07-30 10:00:32 发布

阅读量617

点赞数

分类专栏： h5 文章标签： javascript jquery css3 html5

本文链接：https://blog.csdn.net/weixin_43506403/article/details/108616859

版权

h5 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery自由拖拽代码drag.js插件</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none outside none;
        }
        
        body {
            background: url(../images/rbg.jpg) repeat scroll 0 0 #aaa;
            font-family: "宋体";
            padding: 50px 0 300px;
        }
        
        .box {
            width: 1000px;
            margin: 0 auto 20px;
            height: 500px;
            background: #3bb3e0;
            border: 5px solid #2561b4;
        }
        
        p {
            font-size: 20px;
            color: #333;
            text-align: center;
            margin: 0 0 20px;
        }
        
        .box.box-1 {
            height: 200px
        }
        
        .box-1 dl {
            top: 25px;
        }
        
        .box.box-2 {
            height: 500px
        }
        
        .box-2 dl {
            left: 50%;
            margin-left: -75px;
        }
        
        i.hander {
            display: block;
            width: 100%;
            height: 25px;
            background: #ccc;
            text-align: center;
            font-size: 12px;
            color: #333;
            line-height: 25px;
            font-style: normal;
        }
    </style>
    <!-- 引用js -->
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="./js/drag.js"></script>

    <script>
        $(function() {
            $('.box-1 dl').each(function() {
                $(this).dragging({
                    move: 'x',
                    randomPosition: true
                });
            });
            $('.box-2 dl').each(function() {
                $(this).dragging({
                    move: 'y',
                    randomPosition: true
                });
            });
            $('.box-3 dl').each(function() {
                $(this).dragging({
                    move: 'both',
                    randomPosition: false
                });
            });
            $('.box-4 dl').each(function() {
                $(this).dragging({
                    move: 'both',
                    randomPosition: true
                });
            });
            $('.box-5 dl').each(function() {
                $(this).dragging({
                    move: 'both',
                    randomPosition: true,
                    hander: '.hander'
                });
            });
        });
    </script>
</head>

<body>
    <!-- <script src="/demos/googlegg.js"></script> -->
    <p>只能水平拖动</p>
    <div class='box box-1'>
        <dl><img src="./image/01.jpg" width=150 height=150></dl>
    </div>
    <p>只能垂直拖动</p>
    <div class='box box-2'>
        <dl><img src="./image/02.jpg" width=150 height=150></dl>
    </div>
    <p>自由拖动，初始位置固定</p>
    <div class='box box-3'>
        <dl><img src="./image/03.jpg" width=150 height=150></dl>
    </div>
    <p>自动拖动，初始位置随机</p>
    <div class='box box-4'>
        <dl><img src="./image/04.jpg" width=150 height=150></dl>
        <dl><img src="./image/05.jpg" width=150 height=150></dl>
        <dl><img src="./image/06.jpg" width=150 height=150></dl>
        <dl><img src="./image/07.jpg" width=150 height=150></dl>
    </div>
    <p>自动拖动，初始位置随机，hander拖动</p>
    <div class='box box-5'>
        <dl><i class='hander'>拖我</i><img src="./image/04.jpg" width=150 height=150></dl>
        <dl><i class='hander'>拖我</i><img src="./image/05.jpg" width=150 height=150></dl>
        <dl><i class='hander'>拖我</i><img src="./image/06.jpg" width=150 height=150></dl>
        <dl><i class='hander'>拖我</i><img src="./image/07.jpg" width=150 height=150></dl>
    </div>


</body>

</html>

在这里插入图片描述

运行

白鹭凡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery拖拽代码drag

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; chars
复制链接

扫一扫