jQuery 实现DOM元素拖拽交换位置

最新推荐文章于 2022-06-02 10:49:18 发布

置顶

听卉

最新推荐文章于 2022-06-02 10:49:18 发布

阅读量882

点赞数

分类专栏： jquery 文章标签： jquery css html5

本文链接：https://blog.csdn.net/qq_37159708/article/details/107332000

版权

实现步骤

html + bootstrap布局画3个面板。

注：面板样式 position 属性必须是绝对位置或者相对位置。
监听面板的的 mousedown事件。

记录当前对应面板的位置target_index，设置面板透明拖动。
监听当前被拖动的面板的mousemove事件。

根据鼠标移动的位置和面板的相对位置计算出面板应该出现的新位置，就将面板位置设置为新位置。
监听当前被拖动的面板的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="stylesheet">
	<link rel="stylesheet" type="text/css" href="../css/exchange-position.css"/>
	<!-- 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;"

最低0.47元/天解锁文章

听卉

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery 实现DOM元素拖拽交换位置

实现步骤html + bootstrap布局画3个面板。注：面板样式 position 属性必须是绝对位置或者相对位置。监听面板的的 mousedown事件。记录当前对应面板的位置target_index，设置面板透明拖动。监听当前被拖动的面板的mousemove事件。根据鼠标移动的位置和面板的相对位置计算出面板应该出现的新位置，就将面板位置设置为新位置。监听当前被拖动的面板的mouseup事件。当松开鼠标时，查看当前鼠标所在位置对应的面板的位置exchange_index
复制链接

扫一扫