1,引用JqueryUI
$(function(){
$(".m_title").bind('mouseover',function(){
$(this).css("cursor","move")
}); var $orderlist = $("#orderlist");
var $list = $("#module_list");
$list.sortable({
opacity: 0.6,
revert: true,
cursor: 'move',
handle: '.m_title',
update: function(){
//不用次都去请求
},
success: function(msg) {
//alert(msg); }
});
}
});
})

2,最后拼json 传到后台(避免用tr td)

 function addSection(title, id) {
        var objUl = $("#firsttr");
        var objLi = $("<li class='m_title' ></li>");
        objUl.append(objLi);
        objLi.append("<div class='fl' style='cursor:move;'><p style='position:relative;'><input type='text' value='" + title + "' class='box-shadow-n-d'/></p></div>");
        var obj = $("<a href='javascript:void(0);' class='pic-a-r' style='top: 16px; right: -10px;text-indent:-9999px;'>删除</a>").attr("sectionId", id);
        objLi.find("p").append(obj);
        var sectionId = obj.attr("sectionId") ? obj.attr("sectionId") : "";
        obj.click(function () {
            var $this = $(this);
            if (sectionId != "") {
                art.dialog.confirm('你确定要删除这掉消息吗?', function () {
                    $this.gkPostJson({
                        url: "",
                        data: { "courseId": window.pageConfig["CourseId"], "sectionId": sectionId },
                        success: function (data) {
                            showTips("操作成功");
                            objLi.remove();
                        }
                    });
                }, function () {
                    //art.dialog.tips('执行取消操作');
                });          
            } else {
                objLi.remove();
            }
            
        });

}

 

JQuery拖拽排序的更多相关文章

  1. jquery拖拽排序,针对后台列表table进行拖拽排序(超实用!)

    现在很多后台列表为了方便均使用拖拽排序的功能,对列表进行随意的排序. 话不多说 ,我在网上找了一些demo,经过对比,现在把方便实用的一个demo列出来,基于jqueryUI.js 先上html代码, ...

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

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

  3. jquery sortTable拖拽排序

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

  4. Jquery拖拽,拖动排序插件

    上github搜jquery-sortable <!-- jq拖拽排序 --> <script src="${contextPath}/static/excelTable/ ...

  5. dragsort html拖拽排序

    一.Jquery List DragSort 对于有些页面,如首页的定制,需要进行动态的拖拽排序.由于自己实现比较困难,我们一般会使用一些js插件来实现.dragsort 就是帮助我们完成这一需求.通 ...

  6. 使用knockout-sortable实现对自定义菜单的拖拽排序

    在开始之前,照例,我们先看效果和功能实现. 关于自定义菜单的实现,这里就不多说了,需要了解的请访问:http://www.cnblogs.com/codelove/p/4838766.html 这里需 ...

  7. 11个好用的jQuery拖拽拖放插件

    这次我们整理一些拖拽播放类型的jQuery插件,这些可能不是很常用,但偶尔会有网站设计项目用到,特别是后台相关的开发项目,这个拖放排序功能一般都会有,所以适合大家收藏起来,方便日后使用.接下来一起看盾 ...

  8. easyui树节点拖拽排序的存储过程

    easyui树的拖拽排序功能 easyui树中有拖拽功能 树结构如下: 一个行政区域对应一个单位,一个单位对应多个部门,每个部门下有相关人员,功能要求: (1)行政区域没有子节点,点击text加载部门 ...

  9. RecyclerView拖拽排序和滑动删除实现

    效果图 如何实现 那么是如何实现的呢?主要就要使用到ItemTouchHelper ,ItemTouchHelper 一个帮助开发人员处理拖拽和滑动删除的实现类,它能够让你非常容易实现侧滑删除.拖拽的 ...

随机推荐

  1. 【POJ】3744 Scout YYF I

    http://poj.org/problem?id=3744 题意:直线上n个地雷,n<=10,范围在[1, 100000000],每一次有p的概率向前走一步,1-p的概率向前走两步,问安全通过 ...

  2. [慢查优化]慎用MySQL子查询,尤其是看到DEPENDENT SUBQUERY标记时

    案例梳理时间:2013-9-25 写在前面的话: 在慢查优化1和2里都反复强调过 explain 的重要性,但有时候肉眼看不出 explain 结果如何指导优化,这时候还需要有一些其他基础知识的佐助, ...

  3. docker 报错Failed to start Docker Storage Setup. 的处理基本都是容器满了

    :: localhost docker-storage-setup: Volume group extents): required. Apr :: localhost systemd: docker ...

  4. Objective-c的内存管理MRC与ARC

    Objective-c的内存管理MRC与ARC   Objective-c中提供了两种内存管理机制MRC(MannulReference Counting)和ARC(Automatic Referen ...

  5. java 反取字符串

    public class demo2 { /** * 2 : 将字符串反取出来 新中国好 好国中新 */ public static void main(String[] args) { String ...

  6. sql to_char 日期转换字符串

    1.转换函数 与date操作关系最大的就是两个转换函数:to_date(),to_char() to_date() 作用将字符类型按一定格式转化为日期类型: 具体用法:to_date('2004-11 ...

  7. 防止系统内存溢出触发OOM的一个内核参数

    [root@djf_dev_server ~]# sysctl -a|grep overcomvm.overcommit_memory = 0 0 内存不足报错(不会继续分配内存,防止oom)1 表示 ...

  8. Js闭包常见三种用法

        Js闭包特性源于内部函数可以将外部函数的活动对象保存在自己的作用域链上,所以使内部函数的可以将外部函数的活动对象占为己有,可以在外部函数销毁时依然存有外部函数内的活动对象内容,这样做的好处是可 ...

  9. wamp虚拟主机的配置 .

    开发环境:WAMP 实例一,Apaceh配置localhost虚拟主机步骤 1,用记事本打开apache目录下httpd文件(如:D:\wamp\bin\apache\apache2.2.8\conf ...

  10. 诅咒JavaScript之:Jquery ajax提交内容异常

    jquery ajax 通过url提交内容,在服务器端获取却出现很奇怪的值,代码如下: ajaxurl = "aspx/logTable.ashx?action=load&Every ...