jQuery UI sortable()实现拖动排序

最新推荐文章于 2024-05-14 09:47:51 发布

IT枫斗者

最新推荐文章于 2024-05-14 09:47:51 发布

阅读量1.3k

点赞数 1

分类专栏： JAVA基础工作中实际总结编程学习文章标签： jquery ui 前端

本文链接：https://blog.csdn.net/Andrew_Chenwq/article/details/130999536

版权

编程学习同时被 2 个专栏收录

437 篇文章 10 订阅

订阅专栏

JAVA基础工作中实际总结

356 篇文章 8 订阅

订阅专栏

jQuery UI sortable()实现拖动排序

sortable()

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery UI sortable()实现拖动排序</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://tool.phpddt.com/resources/js/jquery-1.7.2.min.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    </head>
    <body>
       <script>
        $(function() {
          $( ".sortable" ).sortable({
          cursor: "move",
          items :"li",                        //只是li可以拖动
          opacity: 0.6,                       //拖动时，透明度为0.6
          revert: true,                       //释放时，增加动画
          update : function(event, ui){       //更新排序之后
              alert($(this).sortable("toArray"));
          }
         });
       });
      </script>
      <ul class="sortable">
        <li class="ui-state-default"  id="1">第1项</li>
        <li class="ui-state-default"  id="2" >第2项</li>
        <li class="ui-state-default"  id="3">第3项</li>
      </ul>
    </body>
</html>
 
jQuery UI sortable参数：

参数	默认值	作用
axis	false	如果有设置，则元素仅能横向或纵向拖动。可选值：’x’, ‘y’
cancel	input,textarea, button,select,option	阻止排序动作在匹配的元素上发生
connectWith	false	允许sortable对象连接另一个sortable对象，可将item元素拖拽到另一个中.(类型：Selector)
containment	false	约束排序动作只能在一个指定的范围内发生。可选值：DOM对象, ‘parent’, ‘document’, ‘window’, 或jQuery对象
cursor	auto	定义在开始排序动作时，鼠标的样式。如 cursor: “move”
cursorAt	false	当开始移动时，元素的偏移的位置（最多两个方向）。可选值：{ top, left, right, bottom }。如 cursorAt: {left:5,bottom:5}
delay	0	以毫秒为单位，设置延迟多久才激活排序动作。此参数可防止误点击。如 delay: 500
distance	1	决定至少要在元素上面拖动多少像素后，才正式触发排序动作。如 distance: 30
dropOnEmpty	false	是否允許拖拽到一個空的sortable对象中。
grid	false	每次移动都按一个格子大小移动，数组值：[x,y] 如 grid: [50, 20]
handle	false	限制排序的动作只能在item元素中的某种元素如 handle: ‘h2′
helper	original	设置是否在拖拽元素时，显示一个辅助的元素。可选值：‘original’, ‘clone’。如 helper: ‘clone’
items	“> *” (第一级子元素)	指定在排序对象中，哪些元素是可以进行拖拽排序的。如 items: “> li”
opacity	false	辅助元素(helper)显示的透明度如 opacity: 0.6
placeholder	false	设置当排序动作发生时，空白占位符的CSS样式如 placeholder: ‘css-class-name’ （指定一个css的class）
revert	false	如果设置成true，则被拖拽的元素在返回新位置时，会有一个动画效果
scroll	false	如果设置成true，则元素被拖动到页面边缘时，会自动滚动。
scrollSensitivity	20	设置当元素移动至边缘多少像素时，便开始滚动页面
scrollSpeed	20	设置页面滚动的速度
tolerance	intersect	设置当拖动元素越过其它元素多少时便对元素进行重新排序。可选值：’intersect’, ‘pointer’ intersect：至少重叠50% pointer：鼠标指针重叠元素
zIndex	1000	设置在排序动作发生时，元素的z-index值