jQuery拖拽移动-蒲公英云

jQuery拖拽移动

jquery sortable
它所有的事件回调函数都有两个参数：event和ui
ui.helper - 表示sortable元素的JQuery对象，通常是当前元素的克隆对象
ui.position - 表示相对当前对象，鼠标的坐标值对象{top,left}
ui.offset - 表示相对于当前页面，鼠标的坐标值对象{top,left}
ui.item - 表示当前拖拽的元素
ui.placeholder - 占位符（如果有定义的话）
ui.sender - 当前拖拽元素的所属sortable对象（仅当元素是从另一个sortable对象传递过来时有用）3

实例:拖动tbody中的tr

function doRefresh() {
    window.location.reload();
}
$(function(){
    var changed  = false;
    $("tbody").sortable({
        opacity: 0.5,//拖动的透明度 
        revert: true, //缓冲效果 
        cursor: 'move', //拖动的时候鼠标样式 
        start:function(event, ui){
            if(navigator.userAgent.toLowerCase().match(/firefox/)&&ui.helper!=undefined){
                ui.helper.css('position','absolute').css('mergin-top',$(window).scrollTop());
                //当滚动条滚动时关联事件
                $(window).bind('scroll.sortableplaylist',function(){
                    ui.helper.css('position','absolute').css('mergin-top',$(window).scrollTop());
                });
            }
        },
        beforeStop:function(event, ui){
            $(window).bind('scroll.sortableplaylist',function(){
                ui.helper.css('position','absolute').css('mergin-top',0);
            });
        },
        helper:function(e,ui){
   //设置拖动时辅助显示帮助
            ui.children().each(function(){
                $(this).width($(this).width());
            });
            return ui; 
        },
        scroller:true,
        change : function(event,ui){
            changed = true;
        },
        stop:function(event,ui){
   //允许滚动显示
            //在拖动排序停止时可以保存排序
            if(changed){
                var currObj = ui.item;
                var currId = currObj.attr("id");
                var prevId = currObj.prev().attr("id");
                var nextId = currObj.next().attr("id");
                if(undefined==prevId){
                    prevId=0;
                }
                if(undefined==nextId){
                    nextId=0;
                }
                $.post(ROOT_PATH+"questions/question/"+currId+"/order",{prevId:prevId,nextId:nextId},function(data){
                    if(data==1){
                        doRefresh();
                    }
                });
            }
        }
    }).disableSelection();
});