酷站(www.ku0.com)-致力于为互联网从业者提供专业的网络资源

热门关键词:  企业  as  baidu  c4rp3nt3r  美女

jquery实现两个div中的元素相互拖动的方法介绍

来源:互联网搜集 作者:秩名 人气: 发布时间:2020-04-05
本篇文章主要介绍了jquery实现两个div中的元素相互拖动的方法介绍,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

这里写了两个实例,两个都是基于jquery实现的。如果有更好的方法,欢迎分享。

第一个效果图:

拖动中:

拖动完成后:

代码实现:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="jquery-ui-1.11.4/jquery-ui.css" rel="external nofollow" >
        <script src="js/jquery.js"></script>
        <script src="jquery-ui-1.11.4/jquery-ui.js"></script>
        <script>
            function fun(){
                $(".aaa p").draggable({
                    helper: "clone",
                });
            }
            $(function() {
                fun();
                $(".aaa").droppable({
                    activeClass: "ui-state-default",
                    drop: function(event, ui) {
                        $("<p class='ui-draggable'></p>").text(ui.draggable.text()).appendTo(this);
                        var item = ui.draggable;
                        item.remove();
                        fun();
                    }
                })
            });
        </script>
    </head>
 
    <body>
        <div id="catalog">
            <div class="aaa" id="cart2" style="width: 400px; height: 400px; border: 1px solid red; float: left;">
                <p>123</p>
                <p>123</p>
                <p>123</p>
            </div>
    
            <div class="aaa" id="cart" style="width: 400px; height: 400px; border: 1px solid red; float: left;">
                <p>234</p>
                <p>234</p>
                <p>234</p>
                <p>234</p>
            </div>
            
            <div class="aaa" id="cart1" style="width: 400px; height: 400px; border: 1px solid red; float: left;">
                <p>345</p>
                <p>345</p>
                <p>345</p>
                <p>345</p>
            </div>
        </div>
    </body>
 
</html>
 

第二个实例:

效果图:

初始状态

拖动中:

拖动完成后

代码实现:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!doctype html>
<html>
 
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css" rel="external nofollow" >
        <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <style>
            #sortable {
                list-style-type: none;
                margin: 0;
                padding: 0;
                width: 60%;
            }
            
            #sortable li {
                margin: 0 3px 3px 3px;
                padding: 0.4em;
                padding-left: 1.5em;
                font-size: 1.4em;
                height: 18px;
            }
            
            #sortable li span {
                position: absolute;
                margin-left: -1.3em;
            }
        </style>
        <script>
            $(function() {
                $("#sortable").sortable();
                $("#sortable").disableSelection();
            });
        </script>
    </head>
 
    <body>
 
        <ul id="sortable">
            <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
            <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
            <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
            <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
            <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
            <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
            <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
        </ul>
 
    </body>
 
</html>

版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:https://blog.csdn.net/qq_40205116/article/details/90045002

相关文章

  • jquery实现员工管理注册页面的代码

    jquery实现员工管理注册页面的代码

    HTML页面代码 body div class=container h2 class=text-center用户注册/h2 form action=Baidu.html method=post class=form-horizontal div class=form-group label for=username class=col-md-2 col-md-offset-3 control-label用户......
    08-02
  • jquery实现两个div中的元素相互拖动的方法介绍

    jquery实现两个div中的元素相互拖动的方法介绍

    这里写了两个实例,两个都是基于jquery实现的。如果有更好的方法,欢迎分享。 第一个效果图: 拖动中: 拖动完成后: 代码实现: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1......
    04-05
  • jquery添加div实现消息聊天框代码

    jquery添加div实现消息聊天框代码

    代码如下: htmlheadstyle* { margin: 0; padding: 0;} .border { margin-left: 300px; width: 900px; background-color: white; position: relative; border: 1px solid rgb(221, 221, 221);} .border .border-next { background-co......
    02-08
  • jQuery实现验证用户登录

    jQuery实现验证用户登录

    内容 显示效果 输入之前 输入之后点击校验 废话少说,先上代码: HTML代码: !DOCTYPE htmlhtml xmlns=http://www.w3.org/1999/xhtmlhead meta http-equiv=Content-Type content=text/html; charset=utf-8......
    12-11
  • html+jQuery实现拖动滑块图片拼图验证码插件(移动

    html+jQuery实现拖动滑块图片拼图验证码插件(移动

    电脑和手机移动端都适用的jQuery拖动滑块图片拼图验证码插件,通过鼠标拖动或触屏滑动填充拼图来进行安全验证,点击刷新可以更换当前待验证的图片。 HTML css: !DOC......
    09-10
  • Jquery实现获取子元素的方法

    Jquery实现获取子元素的方法

    Jquery获取子元素的方法有2种,分别是children()方法和find()方法。下面我们分别来使用这两种方法,看看它们有何差异。 1.children()方法:获取该元素下的直接子集元素 2.fi......
    08-24
  • jQuery实现的记住帐号密码功能方法

    jQuery实现的记住帐号密码功能方法

    本篇文章介绍jQuery实现的记住帐号密码功能方法 记住密码是每个有帐号登录的网站必备的,现在说一下通过COOKIE实现的记住密码功能。 !DOCTYPE htmlhtmlhead meta charset=utf-8 t......
    08-04
  • JavaScript实现的弹出遮罩层特效经典示例【基于

    JavaScript实现的弹出遮罩层特效经典示例【基于

    本篇文章介绍JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】 效果图: 代码: !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 title查看,修改,删除/title script src=http://libs.b......
    07-10
  • Laravel admin实现消息提醒、播放音频功能

    Laravel admin实现消息提醒、播放音频功能

    本篇文章介绍Laravel admin实现消息提醒、播放音频功能 1.找到laravel-admin 中的 index.blade.php 文件进行编辑 {{-- 音频通知 --}}audio style=display:none; height: 0 id=bg-music preload=auto src......
    07-10
  • jQuery属性选择器用法实例

    jQuery属性选择器用法实例

    本篇文章介绍jQuery属性选择器用法实例 属性选择器 在HTML文档中,元素的开始标记中通常包含有多个属性(attribute) input id=txtUsername type=text value=qiyisoft name=email style=display:......
    06-28