jQuery 实现DOM元素拖拽交换位置的实例代码

2024-09-28 07:47:50

实现步骤

1.html + bootstrap 布局画3个面板。

注：面板样式 position 属性必须是绝对位置或者相对位置。

2.监听面板的的 mousedown事件。

记录当前对应面板的位置target_index，设置面板透明拖动。

3.监听当前被拖动的面板的mousemove事件。

根据鼠标移动的位置和面板的相对位置计算出面板应该出现的新位置，就将面板位置设置为新位置。

4.监听当前被拖动的面板的mouseup事件。

当松开鼠标时，查看当前鼠标所在位置对应的面板的位置exchange_index。对比两个位置，若不一样，说明需要交换这两个位置对应的面板内容，否则直接使被拖动面板回原位即可。

源码

html 代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery 拖拽交换元素的位置</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- 引入 Bootstrap -->
	<!-- 新 Bootstrap 核心 CSS 文件 -->
	<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="../css/exchange-position.css" rel="external nofollow" />
	<!-- Jquery 3.5 -->
	<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
	<script src="../js/exchange-position.js" type="text/javascript" charset="utf-8"></script>
	<!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
	<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->

</head>
<body>
	<div class="container" style="padding-top: 20px;">
		<div class="row" id="panelsBox">
			<div class="col-md-4 column" data-index="1">
				<div class="panel panel-success">
					<div class="panel-heading">
						<h3 class="panel-title">
							Panel title
						</h3>
					</div>
					<div class="panel-body">
						Panel content
					</div>
					<div class="panel-footer">
						Panel footer
					</div>
				</div>
			</div>
			<div class="col-md-4 column" data-index="2">
				<div class="panel panel-info">
					<div class="panel-heading">
						<h3 class="panel-title">
							Panel title
						</h3>
					</div>
					<div class="panel-body">
						Panel content
					</div>
					<div class="panel-footer">
						Panel footer
					</div>
				</div>
			</div>
			<div class="col-md-4 column" data-index="3">
				<div class="panel panel-danger">
					<div class="panel-heading">
						<h3 class="panel-title">
							Panel title
						</h3>
					</div>
					<div class="panel-body">
						Panel content
					</div>
					<div class="panel-footer">
						Panel footer
					</div>
				</div>
			</div>
		</div>

	</div>
</body>
</html>

css 代码：

#panelsBox>div>.panel{
	position: relative;
}

js 代码：

/**
 * 拖拽面板 到某个面板的位置，交换两个面板位置
 * 若没有到任意一个面板位置，则被拖拽面板回原位置
 */
$(function(){
	//1.监听 mousedown 事件
	$("#panelsBox").on('mousedown','.panel',function(e){
		var target_index = $(this).parent().attr("data-index");		//被拖动面板元素位置
		var targetX = e.pageX - parseInt($(this).css("left"));
		var targetY = e.pageY - parseInt($(this).css("top"));
		$(this).fadeTo(20, 0.5);				//点击后开始拖动并透明
		$(this).css("z-index",100);				//设置优先展示

		//2.监听当前被拖拽的面板的移动事件：鼠标移动到何处，相应面板的css控制显示到何处
		$(this).mousemove(function(e){
			var x = e.pageX - targetX;				//移动时根据鼠标位置计算面板元素左上角的相对位置
			var y = e.pageY - targetY;
			$(this).css({top:y,left:x});			//设置面板元素新位置
		}).mouseup(function(e){
			//3.监听鼠标松开事件：交换面板元素，并将父级data-index换为原来的值
			$(this).fadeTo("fast", 1);				//停止移动并恢复成不透明
			$(this).css("z-index",0);				//展示优先级降低
			//鼠标松开对应的面板元素的父div对应data-index
			var exchangeElem = $(document.elementFromPoint(e.pageX,e.pageY)).parents(".panel");

			if(exchangeElem.length > 0){
				var exchange_index = $(exchangeElem[0]).parent("div").attr("data-index");
				var device_id_target = $(exchangeElem[0]).parent("div").attr("data-device-id");
				device_id_target = device_id_target == undefined?"":device_id_target;
				if(target_index != exchange_index){
					//交换面板元素
					$("#panelsBox").children("div[data-index=" + target_index + "]").empty().append(exchangeElem[0]);
					$("#panelsBox").children("div[data-index=" + exchange_index + "]").empty().append(this);
					$("#panelsBox").children("div[data-index=" + exchange_index + "]").children(".panel").css({'top':"0px",'left':"0px",'z-index':0});
					//交换data-index
					$("#deviceList").children("div[data-index=" + target_index + "]")
						attr("data-index",exchange_index);
					$(document.elementFromPoint(e.pageX,e.pageY)).parents(".panel").parent()
						.attr("data-index",target_index);
				}else{
					//返回原位置
					$(this).css({'top':"0px",'left':"0px",'z-index':0});
				}

			}else{
				//返回原位置
				$(this).css({'top':"0px",'left':"0px",'z-index':0});
			}
		});
	});
});

总结

到此这篇关于jQuery 实现DOM元素拖拽交换位置的文章就介绍到这了,更多相关jquery 拖拽交换位置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

jQuery拖拽排序插件制作拖拽排序效果(附源码下载)

使用jquery拖拽排序插件制作拖拽排序效果是一款非常实用的鼠标拖拽布局插件.效果图如下: 效果演示源码下载 html代码: <h1>水平拖拽</h1> <div class="demo"> <div class="item item1"><span>1</span></div> <div class="item item2"><
jQuery利用sort对DOM元素进行排序操作

前言排序对于我们是再熟悉不过了,在绝大数应用程序中都会有这样一个场景:当我们从服务器端获取一个列表时,在界面上进行渲染,我们可以会依赖于某一个规则来进行排序,当然此时绝大多数会再次与服务器进行交互来进行重新渲染列表到客户端,这样做未尝不可,但是在有些情况下,我们既不需要利用框架也不需要重新生成列表到客户端,明明可以在客户端进行,达到我们的目的,为何要再一次发送请求到服务器呢?下面我们来看看. 话题我们首先看看在w3c中js的sort方法. <script type="text/java
jQuery实现的简单拖拽功能示例

本文实例讲述了jQuery实现的简单拖拽功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽</title> <style> *{ padding: 0; margin: 0; } div{ width: 100px; height: 100px; ba
使用jQuery监听DOM元素大小变化

起因今天写页面的时候突然有这么个需求,由于父元素(一个DIV)的height是由javascript计算出来的固定的值,而在其中增加了一个多说插件,在用户评论后,子元素(DIV)的height属性增加,导致子元素溢出.但是又不知道如何为多说的评论按钮增加回调函数,于是乎就想到了根据子元素的大小变化来重新计算父元素的height. onresize? 平常,都是在整个浏览器窗口变化时触发一个修改布局的回调函数.使用的是window对象的resize事件,利用: window.onresize =
jQuery插件实现文件上传功能（支持拖拽）

先贴上源代码地址,点击获取.然后直接进入主题啦,当然,如果你觉得我有哪里写的不对或者欠妥的地方,欢迎留言指出.在附上一些代码之前,我们还是先来了解下,上传文件的时候需要利用的一些必要的知识. 首先我们要说的就是FileReader对象,这是一个HTML5提出的,专门用来异步的读取用户计算机上文件的对象,这里有详细的介绍.所以如果我们想要使用它,那么首先我们得先创建一个FileReader对象. var fr = new FileReader() 1.这个对象拥有五个方法: 下面附上一个例子:
Jquery UI实现一次拖拽多个选中的元素操作

项目需要,实现一个拖放操作,要求每次可以拖拽选中的多个元素,释放到目标容器后可排序.考虑了一下,觉得jquery-ui比较合适,毕竟它提供了项目需要的交互性事件机制.拖拽.释放.排序.选择等效果.而在实际的操作中,遇到个很多的问题,说明一下,最后附上效果图和代码. 1.本人使用的bootstrap框架,引入jquery-ui后,为元素添加拖拽方法后,提示该方法不是一个函数.查找原因,是bootstrap和jquery-uide的$ 标识符控制权冲突.在引入的jquery-ui的js前加上一下语句
基于jQuery实现拖拽图标到回收站并删除功能

本文利用jQuery实现一个拖拽删除桌面小图标的功能,使用起来就像操作系统的回收站一样,我们只需要拖动应用图标至垃圾箱即可删除这个图标,分享给大家,具体实现方法如下运行效果图: 引入核心文件这里需要引入jquery,jquery ui,与jquery ui css <link rel="stylesheet" href="assets/css/jquery-ui.css" /> <script src="js/jquery/1.8.3
jQuery 移动端拖拽（模块化开发，触摸事件，webpack）

通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). 这个demo实现的功能是:可以拖拽的元素(在这里是图片)位于列表中,这些元素可以被拖到指定区域,到达指定区域(控制台)后,元素被插入控制台后,原来的拖动元素返回原位置,新的元素依然可以在控制台中拖动,也能拖出控制台. 在这个demo中一个用三个模块,分别为ajax模块,drag模块,position
jQuery 实现DOM元素拖拽交换位置的实例代码

实现步骤 1.html + bootstrap 布局画3个面板. 注:面板样式 position 属性必须是绝对位置或者相对位置. 2.监听面板的的 mousedown事件. 记录当前对应面板的位置target_index,设置面板透明拖动. 3.监听当前被拖动的面板的mousemove事件. 根据鼠标移动的位置和面板的相对位置计算出面板应该出现的新位置,就将面板位置设置为新位置. 4.监听当前被拖动的面板的mouseup事件. 当松开鼠标时,查看当前鼠标所在位置对应的面板的位置exchange
vue实现拖拽交换位置

本文实例为大家分享了vue实现拖拽交换位置的具体代码,供大家参考,具体内容如下 <template> <div class="root"> <transition-group tag="div" class="container"> <div class="item" :class="'item' + i"
Vue实现移动端拖拽交换位置

本文实例为大家分享了Vue实现移动端拖拽交换位置的具体代码,供大家参考,具体内容如下 <template> <div class="imageUploaderPage"> <ul ref='imgList' class="imgList"> <li ref='imgItem' class="imgCoverItem" v-for='(item, index) in filesResults' :key='
jQuery实现div横向拖拽排序的简单实例

实例如下: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>div横向拖拽排序</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <style type="text/css"
vue悬浮可拖拽悬浮按钮的实例代码

前言 vue开发手机端悬浮按钮实现,可以拖拽,滚动的时候收到里边,不影响视线 github地址使用,基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装,构建手机端模板脚手架 vue-h5-template 后续将发布各种商城组件组件,让商城简单高效开发线上体验使用将 src/components文件夹下的s-icons组件放到你的组件目录下使用组件 // template <template> <div> <
jQuery 检查某个元素在页面上是否存在实例代码

最近做项目,有这么个功能用jQuery检查某个元素在网页上是否存在,这里记录下,也许能帮助正在读文章的朋友. 用jQuery检查某个元素在网页上是否存在时,应该根据获取元素的长度来判断,代码如下: if($("#tt").length > 0) { //元素存在时执行的代码 } 具体原因如下: 在JavaScript中,我们在使用传统的getElementById()和getElementsByTagName()时,如果在网页中找不到相关元素,那么浏览器就会报错,影响后续代码的执
jQuery实现html元素拖拽

代码很简单,效果非常棒,直接给大家上源码: html <div> <div class="money-input"> 定投金额 : <div class="input-rela"> <input type="text" placeholder="2000"/> <span>元</span> </div> </div> <div
Android使用RecycleView实现拖拽交换item位置

本文实例为大家分享了RecycleView实现拖拽交换item位置的具体代码,供大家参考,具体内容如下老规矩,先来一张效果图: 相比起ListView而言,RecycleView实现拖拽交换位置的效果要简单很多,因为通过SDK中的ItemTouchHelper工具类可以轻松的实现这种效果,并且一套代码支持所有布局方式;而ListView的话则需要通过生成View的缓存镜像设置到ImageView中,然后通过WindowManager来操作该ImageView,具体怎么实现这里就不展开讲解了.回
vue实现div拖拽互换位置

本文实例为大家分享了vue实现div拖拽互换位置的具体代码,供大家参考,具体内容如下 template模板 <transition-group tag="div" class="container"> <div class="item" v-for="(item,index) in items" :key="item.key" :style="{background:item.c
jQuery实现容器间的元素拖拽功能

本文实例为大家分享了jQuery实现容器间的元素拖拽,供大家参考,具体内容如下在html中准备三个容器 <div class="container"> <ul> <li>A</li> <li>B</li> <li>C</li> <li>e</li> <li>f</li> <li>g</li> </ul> &

jQuery 实现DOM元素拖拽交换位置的实例代码

相关推荐

随机推荐