一、导入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. python基本数据类型和循环、判断

    一.语言分为2种: 编译型语言:写完代码不能执行,得先编译 c.c++.c#,速度相对解释性语言更快,因为只需要执行一次解释型语言:不需要编译,直接执行 python.java.php.js.go.r ...

  2. 吴恩达《深度学习》-第五门课 序列模型(Sequence Models)-第一周 循环序列模型（Recurrent Neural Networks） -课程笔记

    第一周 循环序列模型(Recurrent Neural Networks) 1.1 为什么选择序列模型?(Why Sequence Models?) 1.2 数学符号(Notation) 这个输入数据 ...

  3. [LeetCode]69. x 的平方根(数学，二分)

    题目 https://leetcode-cn.com/problems/sqrtx 题解 方法一:牛顿迭代法 按点斜式求出直线方程(即过点Xn,f(Xn)),然后求出直线与x轴交点,即为Xn+1: 求 ...

  4. Hadoop入门学习整理（三）

    1.Hive 的安装 下载tar包,并且要注意和Hadoop版本兼容. 下载  ----->  传输 -------> 解压     即可. 然后配置环境变量和相关配置信息.   参考: ...

  5. 在思科三层交换机上配置DHCP,不同网段/VLAN间互通

    摘要: 描述:在三层交换机上配置DHCP,实现DHCP为PC1/PC3分配192.168.1.X网段:实现DHCP为PC2/PC4分配192.168.2.X网段:并且各个PC间要可以互相通信.(文末附 ...

  6. J.U.C之Executor框架入门指引

    1.Executor接口 This interface provides a way of decoupling task submission from the mechanics of how e ...

  7. C++11 随机数生成器

    背景 考试想造浮点数然后发现不会 正好下午被虎哥茶话会 谈到了一些不会的问题balabala的 被告知\(C++11\)有些神奇特性(哦豁) 然后就学习了一手看上去没什么用的随机数生成器\(QwQ\) ...

  8. 关于python中break与continue的区别

    在python中break和continue都有跳出循环体的作用,但是他们还是有一些区别的,具体区别如下: break:是直接跳出循环,跳出自己所处的整个循环体 continue:只是跳出本次循环,而 ...

  9. 有没有异常处理翻车过的，绩效还被打了C

    絮叨 因为程序异常处理问题,就在前几天龙叔的服务挂了几秒钟. 完了,马上季度末打绩效,竟然在这里翻车了,心如刀绞啊. 虽然没有影响到用户体验,但是找到问题并解决掉问题是工程师日常追求之一. 作为一个优 ...

  10. SSM框架整合 IDEA_Maven

    首先是配置web的web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app versio ...