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

分享到

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

jquery 来源：互联网搜集作者：秩名发布时间：2020-04-05 17:11:18 人浏览

摘要

这里写了两个实例，两个都是基于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

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

第一个效果图：

拖动中：

拖动完成后：

代码实现：

				?

									<!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>

第二个实例：

效果图：

初始状态

拖动中：

拖动完成后

代码实现：

			?

								<!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>

您可能感兴趣的文章 :

原文链接 : https://blog.csdn.net/qq_40205116/article/details/90045002

Tag : jQuery(160)DIV(13)

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=
jquery实现两个div中的元素相互拖动的方法介绍

这里写了两个实例，两个都是基于jquery实现的。如果有更好的方法，欢迎分享。第一个效果图：拖动中：拖动完成后：代码实现： ? 1 2
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
jQuery实现验证用户登录

内容显示效果输入之前输入之后点击校验废话少说，先上代码： HTML代码： !DOCTYPE htmlhtml xmlns=http://www.w3.org/1999/xhtmlhead meta http-equiv=Conte
html+jQuery实现拖动滑块图片拼图验证码插件（移动

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

Jquery获取子元素的方法有2种，分别是children()方法和find()方法。下面我们分别来使用这两种方法，看看它们有何差异。 1.children()方法：获取
jQuery实现的记住帐号密码功能方法

本篇文章介绍jQuery实现的记住帐号密码功能方法记住密码是每个有帐号登录的网站必备的，现在说一下通过COOKIE实现的记住密码功能。 !D
JavaScript实现的弹出遮罩层特效经典示例【基于

本篇文章介绍JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】效果图：代码： !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 title查看，修改，
Laravel admin实现消息提醒、播放音频功能

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

本篇文章介绍jQuery属性选择器用法实例属性选择器在HTML文档中，元素的开始标记中通常包含有多个属性(attribute) input id=txtUsername type=text