ul li 拖动排序jquery-ui.js

最新推荐文章于 2023-09-14 14:19:17 发布
最新推荐文章于 2023-09-14 14:19:17 发布
阅读量886 收藏 1
点赞数
分类专栏： 前端开发-javascript 文章标签： javascript ui ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_7451/article/details/82522852
版权 
<html>
  <head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <style>
      #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
      #sortable li { cursor: move;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();       
      });
    </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>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 8</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 9</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 10</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 11</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 12</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 13</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 14</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 15</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 16</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 17</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 18</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 19</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 20</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 21</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 22</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 23</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 24</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 25</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 26</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 27</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 28</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 29</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 30</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 31</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 32</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 33</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 34</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 35</li>
    </ul>
  </body>
</html>

 

官方网站+在线演示：http://jqueryui.com/sortable/

iteye_7451
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现的鼠标拖动排序Li或Table
10-25
主要介绍了使用jquery实现的鼠标拖动排序Li或Table,需要的朋友可以参考下
拖拽排序效果实现
weixin_68537886的博客
05-07 310
【代码】拖拽排序效果实现。
原生JS实现拖拽排序
最新发布
zhoulib__的博客
09-14 314
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { pa
javascript 文章列表的拖拽排序,基于ul和li控件
随风之羽
06-24 1972
<br />source:<br />    function _bindevent(){<br />  //绑定事件<br />    var clis = $( "li.menubar");<br />    var dragli = null;<br />    var dragoverli = null;<br />    var cdiv = null;<br />    clis.bind({ <br />   mousedown:function(){   <br />    if(drag
拖动table,li排序
人生若南柯一梦
12-02 2666
拖动table,li排序
jquery 的li 拖拽事件
Crlcsdn_hp的博客
12-01 540
<ul class="carousel" id="carouselId"> </ul> setDragLiImage("carouselId") function setDragLiImage(Id) { var oUl = document.getElementById(id); var aLi = oUl.getElementsByTagName("li"); var disX = 0; var disY = 0; var minZi...
ul中li拖动换顺序
qq_45283694的博客
03-02 301
ul中li拖动换顺序
jquery-iscroll.js鼠标控制ul左右滑动
12-31
jquery-iscroll.js鼠标控制ul左右滑动
ui-choose.js表单单选框复选框美化jQuery特效.zip
07-11
一款基于ui-choose.js与jQuery插件实现的表单单选框，复选框美化代码，支持原生select标签和ul标签美化，并且能很方便的获取选中的值。
Microsoft.UI.Xaml.2.7-7.2208.15002.0-x64
10-16
Microsoft.UI.Xaml.2.7_7.2208.15002.0_x64__8wekyb3d8bbwe
移动端拖动排序
12-26
改控件很简短，使用方便，页面层次很清晰，拖动的效果也特别好
ui-choose.js表单单选框复选框美化jQuery特效
06-10
一款基于ui-choose.js与jQuery插件实现的表单单选框，复选框美化代码，支持原生select标签和ul标签美化，并且能很方便的获取选中的值。
UL 758 2022-1-20.pdf
03-02
UL 758 2022-1-20.pdf
jquery 移动到对应元素_Jquery实现拖拽可编辑模块
weixin_39765209的博客
11-21 105
index.html iNettuts - Welcome! iNettuts 简介窗口 如果你活着，早...
jquery实现拖拽
Lisunlight的博客
08-17 396
&lt;script&gt; function move_div(obj){ obj.mousedown(function (e) { var oe=e||window.event; var $this = this; var startX = oe.clientX - $this.offsetLeft; var startY...
列表拖动排序
孤独--患者的博客
05-30 1975
<!DOCTYPE html> <html> <head> <title>拖动列表</title> <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script> </head> <...
Jquery 实现div拖拽
liyongke89的专栏
11-30 716
New Document               #div1{         position:absolute;         width:500px;         height:500px;         border:1px solid green;     }     #div2{         position:relative;
ul li 排序 移动 非常简单
08-08 3729
上移下移删除 上移下移删除 上移下移删除 上移下移删除 上移下移删除 上移下移删除 上移下移删除 $("ul li a.up").click(function(){ var $li = $(this).parent().parent() if($li.prev().size()>0){ $li.prev().before($li) } }); $("ul li a
table tr 拖动排序插件jquery.tablednd.js
快乐向日葵
07-30 2152
&lt;html&gt; &lt;head&gt; &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt; &lt;script src="http://isocra.com/js/jquery.tablednd.js"&gt;&lt;/script&gt; &a
通过jquery-ui中的sortable来实现拖拽排序
05-31
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> ``` 2. 在你的HTML文件中，创建一个可以拖拽排序的列表。例如： ``` <ul id="sortable"> <li>Item 1</li> <li>Item 2</li> <li>...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值