原生JS 表格列拖拽 适用JqGrid

这篇具有很好参考价值的文章主要介绍了原生JS 表格列拖拽 适用JqGrid。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

js

$(function () {
    var d1 = new dragTable();
    d1.init({
        tabel: '.drag-table'
    });
})


function dragTable() {
    this.disX = 0; // 相对按下的位置移动的距离
    this.outX = 0; // 鼠标按下的点到大盒子边上的距离
    this.lanX = 0; // 拖动到的位置
    this.$createDiv = null;
    this.$createDivBg = null;
    this.clickEv = null;
    this.set = {
        tabel: '.Report'
    }
}

dragTable.prototype.init = function (opt) {
    $.extend(this.set, opt);
    console.log(opt)

    this.$createDiv = $('<div class="createDiv"></div>');
    this.$createDivBg = $('<div class="createDivBg"></div>'); // 防止复制页面的文字;
    this.events();
}
dragTable.prototype.events = function () {
    var $th = $(this.set.tabel).find('th');
    var that = this;
    $(document).on('mousedown', this.set.tabel + ' th', function (e) {
        that.clickEv = this;
        that.mousedown(this, e);
        that.$createDivBg.show();
    });
    $(document).on('mouseup', this.set.tabel + ' th,.createDiv,.createDivBg', function (e) {
        that.mouseup(this, e);
    })
}
dragTable.prototype.mousedown = function (that, e) {
    $('body').append(this.$createDiv, this.$createDivBg);
    this.$createDiv.html($(that).html()).hide();

    this.outX = e.pageX - $(that).offset().left;
    var initX = e.pageX;
    var that = this;
    $(document).on('mousemove', function (ev) {
        that.mousemove(that, initX, ev);
    });
}

dragTable.prototype.mousemove = function (that, initX, ev) {
    this.disX = ev.pageX - initX;
    this.lanX = ev.pageX;
    this.$createDiv.css({top: ev.pageY - 20, left: ev.pageX - 10});
    this.getCurrentTh('move');
    Math.abs(this.disX) > 4 ? this.$createDiv.show() : this.$createDiv.hide();
}

dragTable.prototype.mouseup = function (that, ev) {
    $(document).unbind('mousemove');
    this.resetTable();
}

dragTable.prototype.resetTable = function () {
    this.$createDiv.remove();
    this.$createDivBg.remove();
    this.getCurrentTh('up');
    this.lanX = 0;
    this.disX = 0; // 重置disX
    // this.showBorder('all', {'border-color': '#d8d8d8'});
}

dragTable.prototype.getCurrentTh = function (type) {
    var that = this;
    $(this.set.tabel + ' th').each(function (index, item) {
        var l = $(item).offset().left;
        var r = $(item).offset().left + $(item).width();

        if (that.lanX > l && that.lanX < r) {
            $(".frozen-div").remove();
            $(".frozen-bdiv").remove();
            // that.showBorder(index, {'border-color': '#d8d8d8'});
            if (that.disX > 4) { // 右
                // that.showBorder(index, {'border-right': '2px solid red'});
                type == 'up' ? that.setThTd(index, 'after') : '';
            }
            if (that.disX < -4) { // 左边
                // that.showBorder(index, {'border-left': '2px solid red'});
                type == 'up' ? that.setThTd(index, 'before') : '';
            }
        } else {
            // that.showBorder(index, {'border-color': '#d8d8d8'})
        }
    })
}

dragTable.prototype.setThTd = function (newsindex, type) {
    var oldIndex = $(this.clickEv).index();

    var $th = $(this.set.tabel + ' th').eq(oldIndex);
    $(this.set.tabel + ' th').eq(newsindex)[type]($th.clone());
    $th.remove();
    $(this.set.tabel + ' tbody tr').each(function (index, tdelement) {
        var $td = $(tdelement).find('td').eq(oldIndex);
        $(tdelement).find('td').eq(newsindex)[type]($td.clone());
        $td.remove();
    });
}

dragTable.prototype.showBorder = function (newsindex, css) {
    if (newsindex == 'all') {
        $(this.set.tabel + ' th').css(css);
        $(this.set.tabel + ' td').css(css);
        return;
    }
    $(this.set.tabel + ' th').eq(newsindex).css(css)
    $(this.set.tabel + ' tbody tr').each(function (index, tdelement) {
        $(tdelement).find('td').eq(newsindex).css(css);
    });
}

页面引用js就不用多说了,在class添加
原生JS 表格列拖拽 适用JqGrid,javascript,开发语言,ecmascript
不是JqGrid可以注释这个
原生JS 表格列拖拽 适用JqGrid,javascript,开发语言,ecmascript文章来源地址https://www.toymoban.com/news/detail-733170.html

到了这里,关于原生JS 表格列拖拽 适用JqGrid的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包