一、导入js。导入jquery.dragsort.js外还需要导入jQuery。

二、HTML部分

<!DOCTYPE html>

<html>

<head>

    <title>DragSort Example </title>

    <meta charset="utf-8" />

    <link href="desktop.css" rel="stylesheet" type="text/css" />

    <style type="text/css">

        body

        {

            font-family: Arial;

            font-size: 12pt;

            padding: 20px;

            width: 500px;

            margin: 20px auto;

            border: solid 1px black;

        }

        h1

        {

            font-size: 16pt;

        }

        h2

        {

            font-size: 13pt;

        }

        ul

        {

            width: 350px;

            list-style-type: none;

            margin: 0px;

            padding: 0px;

        }

        li

        {

            float: left;

            padding: 5px;

            width: 120px;

            height: 120px;

        }

        li div

        {

            width: 90px;

            height: 50px;

            border: solid 1px black;

            background-color: #E0E0E0;

            text-align: center;

            padding-top: 40px;

        }

        .placeHolder div

        {

            background-color: white !important;

            border: dashed 1px gray !important;

        }

    </style>

</head>

<body>

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>

    <form method="post" action="Default.aspx" id="form1">

    <div>

        <ul id="gallery" runat="server">

             <li data-itemid='0'>

                <div>

                    green</div>

            </li>

            <li data-itemid='1'>

                <div>

                    white</div>

            </li>

            <li data-itemid='2'>

                <div>

                    yellow</div>

            </li>

            <li data-itemid='3'>

                <div>

                    red</div>

            </li>

        </ul>

        <script type="text/javascript" src="jquery.dragsort-0.5.2.min.js"></script>

        <script type="text/javascript">

            $("#gallery").dragsort({ dragSelector: "div", dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });

            function saveOrder() {

                var data = $("#gallery li").map(function () { return $(this).data("itemid"); }).get();

                //   alert(data);

                $.ajax({ url: "Default.aspx/SaveOrder", data: '{arr:["' + data.join('","') + '"]}', dataType: "json", type: "POST", contentType: "application/json; charset=utf-8" });

            };

        </script>

        <div style="clear: both;">

        </div>

    </div>

    </form>

</body>

</html>

　　

三、后台部分

 [WebMethod]

    public static void SaveListOrder(int[] arr)

    {
        //这里就是你要做的操作，比如修改顺序保存到数据库...

        for (int i = 0; i < arr.Length; i++)

        {

            int id = arr[i];

            int ordinal = i;

            //...

        }

    }

　　

最后分奉上源码供大家参考：http://files.cnblogs.com/files/chenghu/JqueryUI%2C%E6%8B%96%E6%8B%BD%2Cdragsort.rar

压缩包解压密码： 111211

jquery ui,拖拽,dragsort的更多相关文章

  1. jQuery UI 拖拽-拉伸

    jquery-ui实现 官网:http://www.runoob.com/jqueryui/example-resizable.html layui实现 demo:http://www.jq22.co ...

  2. jQuery可拖拽3D万花筒旋转特效

    这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...

  3. jQuery可拖拽排序列表jquery-sortable-lists

    jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动,拖动后回调,点击可以折叠树型结点,可以用来在后台模仿wordpress后台拖动菜单,实现多级菜 ...

  4. jquery sortTable拖拽排序

    所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象   ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象   ...

  5. jquery实现拖拽以及jquery监听事件的写法

    很久之前写了一个jquery3D楼盘在线选择,这么一个插件,插件很简单,因为后期项目中没有实际用到,因此,有些地方不是很完善,后面也懒得再进行修改维护了.最近放到github上面,但是也少有人问津及s ...

  6. jQuery 鼠标拖拽排序

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  7. SpringMvc+jQuery 文件拖拽上传、选择上传

    最近做了个简易的基于boostrap的文件上传功能,jsp版本的,后续会完善更多的功能,不过现在已经能用了,需要的小伙伴,直接引用下面的文件内容直接copy到自己的项目中就ok了,效果如图: file ...

  8. 面向对象+jquery实现拖拽功能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. JQuery之拖拽插件

    一直以来,都对JS获取元素的位置感到非常的困惑:一会client.一会offset.一会scroll. 再加上各大浏览器之间的不兼容,唉,搞得哥晕晕乎乎的. 而很多页面效果都要用到这些位置.不得已,得 ...

随机推荐

  1. oracle之二表和表空间的关系

    表和表空间的关系 建一个使用缺省值的表空间SQL> create tablespace a datafile '/u01/data/urpdb/a01.dbf' size 10m; 利用orac ...

  2. [LeetCode]78. 子集(位运算；回溯法待做)

    题目 给定一组不含重复元素的整数数组 nums,返回该数组所有可能的子集(幂集). 说明:解集不能包含重复的子集. 示例: 输入: nums = [1,2,3] 输出: [ [3],   [1],   ...

  3. [补题]找到原序列长度k的子序列中字典序最小的那个(单调栈)

    题意 题目如题,输入序列只包含小写字母,数据范围0<k<=len<=500000. 例: 输入:helloworld 输出:ellld 题解 使用单调栈.当已删掉n-k个字符,输出栈 ...

  4. Spring源码解析 | 第一篇 ：IntelliJ IDEA2019.3编译Spring5.3.x源码

    前言 工欲善其事必先利其器.学习和深读Spring源码一个重要的前提:编译源码到我们的本地环境.这样方便我们在本地环境添加注释.断点追踪.查看类或接口的继承关系等等,更加高效的学习Spring源码.个 ...

  5. java里的锁总结（synchronized隐式锁、Lock显式锁、volatile、CAS）

    一.介绍 首先, java 的锁分为两类: 第一类是 synchronized 同步关键字,这个关键字属于隐式的锁,是 jvm 层面实现,使用的时候看不见: 第二类是在 jdk5 后增加的 Lock ...

  6. Shell编程（4）

    shell函数 shell中允许将一组命令集合或语句形成一段可用代码,这些代码块称为shell函数.给这段代码起个名字称为函数名,后续可以直接调用该段代码. 格式 func() { #指定函数名 co ...

  7. 树莓派Raspberry Pi OS（原Raspbian）系统常用配置

    首次开机自动连接WIFI 在资源浏览器中打开刚写好Raspberry Pi OS(之前叫Raspbian)系统的SD卡,如果有boot目录则在boot目录中新建一个名为wpa_supplicant.c ...

  8. Latex博客转载

    \[{e^{ix}=cosx+isinx} \] \[[博客地址](https://www.cnblogs.com/Sinte-Beuve/p/6160905.html) \]

  9. css定位于xpath的区别

    css选择  是依据页面的数据样式定位的, 有标签选择, 类选择, id选择, 或者他们的交并集, 除此之外没有其他的辅助元素了 xpath  是路径表达式,所有元素和内容都可以成为路径的一部分. 两 ...

  10. 渗透测试方法论(qf总结)

    渗透测试(penetration testing , pentest)是实施安全评估(即审计)的具体手段.方法论是在指定.实施信息安全审计方案时,需要遵循的规则.惯例和过程.人们在评估网路.应用.系统 ...