返回顶部

收藏

jquery拖拽-jeasyframe框架组件抽离

更多

来自jeasyframe框架中的菜单排序功能,可以自定义单表格或多表格之间的拖拽功能的实现.

本功能基于jquery1.4

var mPressed = false; //鼠标按下
var mMoved = false;  //鼠标移动
var dragSource = false; //拖拽节点数据
var dragTimer = false; //拖拽timer事件
/************************************拖拽排序控件 开始***********************************/
$.fn.nfpDrag = function (opt) {
    return this.each(function () {
        var TABLE = this;   //本拖拽控件
        var interv = null;
        TABLE.option = {
            /***********可配置内容(可扩展)************/
            dragStyle: true,
            /**********事件*************/
            afterMove: false //拖拽完后执行的方法
            /*********可扩展自定义属性或方法********/
        };
        TABLE.option = $.extend(TABLE.option, opt);

        //设置拖拽事件
        TABLE.setDragEvent = function (tdOrTh) {
            tdOrTh.bind('selectstart', function () {
                return false;
            }).click(function () {
                //return false;
            }).dblclick(function () {
                //双击事件
                mPressed = false;
                return false;
            }).mousedown(function (event) {
                if (event.which != 1)
                    return false;
                if ($("#drag_container").size() == 1) {
                    TABLE.moveTR($(this).parent());
                    TABLE.eventDestroy();
                    return false;
                }
                //鼠标按下事件,执行拖拽
                mPressed = true;
                var TR = $(this).parent();
                //保存拖拽前节点,跳出浮动拖拽提示层
                cloneTr = TR.clone();
                $('body').append('<div id="drag_container"><table border="0" cellspacing="5"></table></div>');
                $('#drag_container').hide().css({ opacity: '0.8' });
                $('#drag_container >table').append(cloneTr);
                $(document).bind("mousemove", { TR: TR }, TABLE.dragStart).bind("mouseup", TABLE.dragEnd);
                return false;
            }).mouseup(function () {
                //鼠标松开事件,完成拖拽
                if (mPressed && mMoved && dragSource) {
                    TABLE.moveTR($(this).parent());
                }
                TABLE.eventDestroy();
            });
        };
        TABLE.clearScroll = function () {
            window.clearInterval(interv);
            interv = null;
        }

        //开始拖拽
        TABLE.dragStart = function (event) {
            var TR = $(event.data.TR);
            if (mPressed) {
                if (event.pageY > $(TABLE).parent().height() + $(TABLE).offset().top + $(TABLE).parent().scrollTop()) {
                    if (interv == null)
                        //向下滚动
                        interv = window.setInterval(function () { $(TABLE).parent().scrollTop($(TABLE).parent().scrollTop() + 3); }, 10);
                } else if (event.pageY < $(TABLE).offset().top + $(TABLE).parent().scrollTop()) {
                    if (interv == null)
                        //向下滚动
                        interv = window.setInterval(function () { $(TABLE).parent().scrollTop($(TABLE).parent().scrollTop() - 3); }, 10);
                } else {
                    TABLE.clearScroll();
                }
                mMoved = true;
                if (dragTimer) clearTimeout(dragTimer);
                if ($('#drag_container:not(:visible)')) {
                    //保存拖拽参数
                    $('#drag_container').show();
                    if (TABLE.option.dragStyle) {
                        TR.prev().find("[class*='allowDrag']").addClass("startDrag").css("border-bottom", "dashed 2px #ccc");
                    }
                    TR.prev().attr("tempTag", "true");
                    dragSource = TR;
                }
                //拖拽浮动提示层
                $('#drag_container').css({ position: 'absolute', "left": (event.pageX + 5), "top": (event.pageY + 15) });
                if (TR.is(':visible')) TR.hide();
                //移出所有列表
                if (!event.target.tagName) {
                    TABLE.dragEnd();
                    var hideCon = $("tr:not(:visible)");
                    if (hideCon.find(".allowDrag").size() > 0)
                        hideCon.show();
                    return false;
                }
                if ($(event.target).attr("class").indexOf("allowDrag") != -1) {
                    if ($(event.target).attr("class").indexOf("tdDrag") == -1) {
                        $("[class*='tdDrag']").removeClass("tdDrag").css("border-bottom", "");
                        $(event.target).parent().find("[class*='allowDrag']").addClass("tdDrag").css("border-bottom", "dashed 2px #000");
                    }
                } else {
                    $("[class*='tdDrag']").removeClass("tdDrag").css("border-bottom", "");;
                }
                return false;
            }
            return true;
        };
        //拖拽完成
        TABLE.dragEnd = function () {
            //停止拖拽事件,清理临时参数
            if (dragTimer) clearTimeout(dragTimer);
            TABLE.eventDestroy();
        };

        //停止拖拽事件,清理临时参数
        TABLE.eventDestroy = function () {
            TABLE.clearScroll();
            $(document).unbind('mousemove', TABLE.dragStart).unbind('mouseup').unbind('mousedown');
            $('#drag_container').remove();
            $("tr[tempTag]").removeAttr("tempTag");
            if (dragSource) {
                dragSource.show();
            }
            $("[class*='startDrag']").removeClass("startDrag").css("border-bottom", "");
            $("[class*='tdDrag']").removeClass("tdDrag").css("border-bottom", "");
            dragSource = mPressed = mMoved = false;
        };
        //将节点移动置节点中
        TABLE.moveTR = function (tr) {
            //拖拽回原位置,不做任何修改
            if ($(tr).attr("tempTag") == 'true') {
                return true;
            }
            tr.after($("#drag_container tr").parent().html());
            TABLE.setDragEvent(tr.next().children());
            //拖拽后事件
            if (typeof (TABLE.option.afterMove) == 'function') {
                //参数(当前行,上一行)
                TABLE.option.afterMove(tr.next(), tr);
            }
            $(dragSource).remove();
            dragSource = false;
        };

        //拖拽控件初始化
        TABLE.init = function () {
            //添加样式
            $(TABLE).find("td,th").addClass("allowDrag").each(function () {
                if ($(this).parent().prev().attr("class") != null) {
                    TABLE.setDragEvent($(this));
                } else {
                    $(this).mousedown(function () {
                        return false;
                    }).mouseup(function () {
                        //鼠标松开事件,完成拖拽
                        if (mPressed && mMoved && dragSource) {
                            TABLE.moveTR($(this).parent());
                        }
                        TABLE.eventDestroy();
                    });
                }
            });
        };
        TABLE.init();
    });
}
//该片段来自于http://outofmemory.cn

标签:jquery,javascript,控件

收藏

0人收藏

支持

0

反对

0

发表评论