你的位置:首页 > Java教程

[Java教程]JQuery拖拽排序


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();
            }
            
        });
    }