【JS】使用sortable实现拖拽功能

最新推荐文章于 2024-05-13 18:03:26 发布

夜_清澄

最新推荐文章于 2024-05-13 18:03:26 发布

阅读量2.8k

点赞数

分类专栏：小程序 js 拖拽

本文链接：https://blog.csdn.net/changquanzhu2969/article/details/80915291

版权

emmmmm 感觉自己是个被java耽误了的前端

闲话少说进入正题

工作中有的时候需要实现一个拖拽功能比如你有一个列表然后忽然客户说改需求了这个列表顺序要变你也不能说整个删了重新写一个列表吧这多绝望啊就有了几个解决方案：

1.弄个图标上移下移

function move(obj,fx)
{
	var parent = $(obj).parents(".ui-state-default");
	if(fx == 'up')
	{
		var prev = parent.prev();//取得同辈相邻前一个
		prev.before(parent);
	}else
	{
		var next = parent.next();
	        next.after(parent);
	}
	//移完更新+-号的显示
	checkTuBiaoIsOkay();
}

那个checkTuBiaoIsOkay纯粹是我个人强迫症觉得第一个不能往上移就不要+号或者上箭头符号什么的最后一个不能下移就不用-号或者下箭头什么的

这种写起来是很简单的但是用起来就会觉得好麻烦哦得一个个点移动一次还只能移动一位

反正我要是客户我肯定会投诉的你们什么垃圾系统用户体验这么差

所以就有了第二种解决方案：拖拽div移动

首先需要引入Jquery-ui.js

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

官方肯定也是有说明的这是官方示例地址：sortable官方示例

具体代码大概就是这样的

<html>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <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 src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<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

最低0.47元/天解锁文章

夜_清澄

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
10
评论
【JS】使用sortable实现拖拽功能

emmmmm 感觉自己是个被java耽误了的前端闲话少说进入正题工作中有的时候需要实现一个拖拽功能比如你有一个列表然后忽然客户说改需求了这个列表顺序要变你也不能说整个删了重新写一个列表吧这多绝望啊就有了几个解决方案：1.弄个图标上移下移function move(obj,fx){ var parent = $(obj).parents(".ui-state-default");...
复制链接

扫一扫