jQuery-ui插件sortable实现自由拖动排序

本文为大家分享了jQuery ui插件sortable实现自由拖动排序的具体方法，供大家参考，具体内容如下

此为网上资源demo自己做了修改，记录下方便日后的学习。

效果展示：

代码展示：

<!doctype html>
<html lang="en">
<!--
  学习功能：使用Jquery-ui的sortable插件实现拖动排序
  author: lisa于2018-5-30
-->
<head>
  <meta charset="utf-8">
  <title>终极版拖动排序</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .container {
      width: 350px;
      margin: 60px auto;
    }

    .container:after {
      content: "";
      display: block;
      clear: both;
    }

    .drag {
      width: 100%;
      height: 60px;
      float: left;
      margin: -8px 0;
    }

    ul li {
      list-style: none;
    }

    .innerdiv {
      padding: 10px;
      height: 100%;
    }

    .innerdiv2 {
      border: 1px solid #bdb9b9;
      background: #fff;
      height: 100%;
    }

    .move {
      width: 65px;
      height: 100%;
      background: pink;
      float: right;
      cursor: pointer;
    }

    .msg {
      display: inline-block;
      width: 130px;
      padding: 6px 6px 6px 12px;
      vertical-align: top;
    }

    .btn {
      background: pink;
      color: #fff;
      padding: 0px 10px;
      border-radius: 4px;
      border: 1px;
      height: 30px;
      cursor: pointer;
      font-size: 1.4rem;
      float: right;
      margin-right: 10px;
      margin-top: 10px;
    }
  </style>
  <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>

<body>
  <div class="container">
    <ul class="sortable">
      <li id="draggable1" class="drag">
        <div class="innerdiv">
          <div class="innerdiv2">
            <div class="move"></div>
            <span class="msg">list1</span>
          </div>
        </div>
      </li>
      <li id="draggable2" class="drag">
        <div class="innerdiv">
          <div class="innerdiv2">
            <div class="move"></div>
            <span class="msg">list2</span>
          </div>
        </div>
      </li>
      <li id="draggable3" class="drag">
        <div class="innerdiv">
          <div class="innerdiv2">
            <div class="move"></div>
            <span class="msg">list3</span>
          </div>
        </div>
      </li>
      <li id="draggable4" class="drag">
        <div class="innerdiv">
          <div class="innerdiv2">
            <div class="move"></div>
            <span class="msg">list4</span>
          </div>
        </div>
      </li>
      <li id="draggable5" class="drag">
        <div class="innerdiv">
          <div class="innerdiv2">
            <div class="move"></div>
            <span class="msg">list5</span>
          </div>
        </div>
      </li>
      <li id="draggable6" class="drag">
        <div class="innerdiv">
          <div class="innerdiv2">
            <div class="move"></div>
            <span class="msg">list6</span>
          </div>
        </div>
      </li>
    </ul>
    <button class="btn">提交</button>
  </div>
</body>

</html>
<script>
  $(function () {
    var bttn = $('.container .btn');
    var arr = '';
    var sort = $(".sortable").sortable({
      handle: ".move",
      delay: 0,
      cursor: 'move',
      revert: true,
      stop: bttn.click(function (event) {
        //记录sort后的id顺序数组
        var arr = $(".sortable").sortable('toArray');
        console.log(arr);
      })
    });

  });
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jquery控制listbox中项的移动并排序

    首先是html代码,页面上放2个listbox控件和2个按钮用于移动项目 复制代码 代码如下: <table border="0"> <tr> <td width="156">全部水果:</td> <td width="142"> </td> <td width="482">我挑选的:</td> </tr> <tr

  • Jquery实现上下移动和排序代码

    Jquery实现上下移动和排序代码

    提出问题: 下文为大家介绍下Jquery实现上下移动和排序,感兴趣的朋友可以了解一下. 解决问题 代码实现: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type"

  • jquery实现的鼠标拖动排序Li或Table

    1.前端页面 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Table.aspx.cs" Inherits="拖动排序Li或Table" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http

  • jquery控制listbox中项的移动并排序的实现代码

    首先是html代码,页面上放2个listbox控件和2个按钮用于移动项目 复制代码 代码如下: <table border="0"> <tr> <td width="156">全部水果:</td> <td width="142"> </td> <td width="482">我挑选的:</td> </tr> <tr

  • 基于JQuery的列表拖动排序实现代码

    要求 拖动排序,从名字就不难想像,就是按住一行数据拖到想要的排序位置,保存新的排序队列. 思路 首先给列表行建立锚点,绑定mousedown和mouseup事件,当鼠标移动到想要插入的位置时,将对象行移动到目标行,然后对其经过的所有行进行排序处理. 思路很简单,但这里面仍然有几个问题要注意 1.移动到什么位置可以视作要插入到目标行的位置.2.移动出了顶端和底端时,判断为第一和最后.3.向上移动和向下移动的处理 解决 关于事件 Javascript里鼠标按下和放开事件为onmousedown,on

  • jquery对元素拖动排序示例

    完整代码:(aspx文件末尾有下载) 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <

  • jQuery拖动元素并对元素进行重新排序

    jQuery拖动元素并对元素进行重新排序

    本文实例讲述了jQuery拖动元素并对元素进行重新排序的实现方法,分享给大家供大家参考,具体实现内容如下 效果图: 具体内容如下: 从上图可以看出我们今天要实现的功能.当用户拖动一个图片时,就能改变图片的已有排序并更新表中的排列顺序.比如用户可以随意拖动我们网站中的布局,如谷歌iGoogle就已经实现了.这样便很好的提高了用户体验. 下边,我们一步一步来实现这个功能. <span id="show"> <div> <input id="check

  • jquery ui sortable拖拽后保存位置

    jqueryUI sortable 可以用来进行页面拖拽布局,然而有一个小问题就是拖拽后如何保存状态. 工作中遇到了这个情况,遍把这个问题记了下来,具体思路是: 利用拖拽stop后利用 var arr = $( ".sortable" ).sortable('toArray'); 记录拖拽后的id数组顺序,然后把这个数组存起来,可以存cookie,数据库,localstorage等,刷新页面后读取这个数组,然后进行重新排序. 具体的代码如下可直接复制运行.本文将数组保存在localst

  • jquery sortable的拖动方法示例详解

    所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 ui.position - 表示相对当前对象,鼠标的坐标值对象{top,left} ui.offset - 表示相对于当前页面,鼠标的坐标值对象{top,left} ui.item - 表示当前拖拽的元素 ui.placeholder - 占位符(如果有定义的话) ui.sender - 当前拖拽元素的所属

  • 通过jquery-ui中的sortable来实现拖拽排序的简单实例

    通过jquery-ui中的sortable来实现拖拽排序的简单实例

    1.引入文件 <script src="{sh::PUB}js/jquery-1.10.1.min.js"></script> <link rel="stylesheet" href="Public/css/jquery-ui.min.css"> <script src="{sh::PUB}js/jquery-ui.min.js"></script> 2.给元素附上s

随机推荐