表格拖拽效果（贴上所有代码）

最新推荐文章于 2024-07-04 21:34:30 发布

置顶文斯特

最新推荐文章于 2024-07-04 21:34:30 发布

阅读量816

点赞数

分类专栏：前端文章标签：前端 jQuery 表格拖拽

本文链接：https://blog.csdn.net/zw3127/article/details/78413376

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<HTML>
    <head>
        <TITLE>The document title</TITLE>
        <meta charset=utf-8>
        <script src="jquery.1.9.0.min.js" type="text/javascript"></script>
        <style type="text/css">
        table{
        border-spacing: 0;
        }
        td{
        height: 50px;
        width: 50px;
        border-spacing: 0;
        }
        .hidden{
        display: none;
        }
        </style>
    </head>

    <body>
        <table id="dataTab" border="1">
            <tr id ="r1">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr id ="r2">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        <p id ='log'></p>
        <button id="hebing" type="button" >合并</button>
        <script type="text/javascript">
       (function(b){
           b.drag = b.drag || {
                   selectecdlog: [],
                   resultLen: 0,
                   resultBegin: 0,
                   backColor: ['red','green','blue'], // assume 3 rows 1 -red 2 - green 3 - blue
                   resultColor: 0
           };
           b.extend(b.drag, {
               version: "1.0.1",
               author: "zhou wei",
               updateTime: "2017.10.21",
               getAccessor: function(b, f) {
                   var c, e, a = [],
                   j;
                   if ("function" === typeof f) return f(b);
                   c = b[f];
                   if (void 0 === c) try {
                       if ("string" === typeof f && (a = f.split(".")), j = a.length) for (c = b; c && j--;) e = a.shift(),
                       c = c[e];
                   } catch(g) {}
                   return c;
               },
               getMethod: function(d) {
                   return this.getAccessor(b.fn.drag, d);
               },
               onMouseUp: function(){
                   /* Act on the event */
                   var len =b.drag.resultLen= Math.abs(parseInt(b.drag.selectecdlog[0].substr(b.drag.selectecdlog[0].indexOf('c')+1)) - parseInt($(this).attr('id').substr(($(this).attr('id').indexOf('c'))+1)))+1;
                   var begin =b.drag.resultBegin= parseInt(b.drag.selectecdlog[0].substr(b.drag.selectecdlog[0].indexOf('c')+1)) >parseInt($(this).attr('id').substr(($(this).attr('id').indexOf('c'))+1)) ? parseInt($(this).attr('id').substr(($(this).attr('id').indexOf('c'))+1)):parseInt(b.drag.selectecdlog[0].substr(b.drag.selectecdlog[0].indexOf('c')+1));
                   for(var i =0; i<b.drag.resultLen;i++){
                       b.drag.selectecdlog.push(b.drag.selectecdlog[0].substr(0,2)+"c"+(b.drag.resultBegin+i));
                   }
                   b.drag.selectecdlog.shift();
                   $('#log').text(b.drag.selectecdlog.toString());

                   b(a).find("td").unbind('mouseover',b.drag.onMouseOver);
                   b(a).find("td").unbind('mouseup',b.drag.onMouseUp);
               },
               onMouseOver: function() {
                   var len =b.drag.resultLen= Math.abs(parseInt(b.drag.selectecdlog[0].substr(b.drag.selectecdlog[0].indexOf('c')+1)) - parseInt($(this).attr('id').substr(($(this).attr('id').indexOf('c'))+1)))+1;
                   var begin =b.drag.resultBegin= parseInt(b.drag.selectecdlog[0].substr(b.drag.selectecdlog[0].indexOf('c')+1)) >parseInt($(this).attr('id').substr(($(this).attr('id').indexOf('c'))+1)) ? parseInt($(this).attr('id').substr(($(this).attr('id').indexOf('c'))+1)):parseInt(b.drag.selectecdlog[0].substr(b.drag.selectecdlog[0].indexOf('c')+1));
                   b(a).find('td').css('background-color', 'white');
                   for(var i =0; i<len;i++){
                       b(a).find('#'+b.drag.selectecdlog[0].substr(0,2)+"c"+(begin+i)).css('background-color', b.drag.resultColor);
                   }
               },
               extend: function(d) {
                   b.extend(b.fn.drag, d);
                   this.no_legacy_api || b.fn.extend(d);
               }

           })

           b.fn.drag = function(d) {
               if ("string" === typeof d) {
                   var f = b.drag.getMethod(d);
                   if (!f) throw "drag - No such method: " + d;
                   var c = b.makeArray(arguments).slice(1);
                   return f.apply(this, c);
               }
               var e = b.extend(!0, {},a=this,b.drag.defaults, d || {});
               // set id attr for each td
               b(a).find("td").each(function(index, val){
                   /* iterate through array or object */
                   $(this).attr('id', $(this).parent().attr('id')+"c"+($(this).index()+1))
               });

               b(a).find("td").mousedown(function() {
                   b.drag.selectecdlog = [];
                   b.drag.resultColor = b.drag.backColor[b(this).parent().attr('id').substr(1)-1];
                   console.log(b.drag.resultColor.toString());
                   b(a).find('td').css('background-color', 'white');
                   b(this).css('background-color', b.drag.resultColor);
                   b.drag.selectecdlog.push($(this).attr('id'));
                   b(a).find("td").mouseup(b.drag.onMouseUp);
                   b(a).find("td").mouseover(b.drag.onMouseOver);
               })
               b("#hebing").click(function(){
                   m = b.drag.getMethod('combine');
                   m.call(this);
               })
               return this;
           }

           b.drag.extend({
               //combine cells
               combine: function(argument) {
                   // body...
                   for (var m in b.drag.selectecdlog){
                       if(m==0){
                           $('#'+b.drag.selectecdlog[m]).attr('colspan', b.drag.resultLen);
                           $('#'+b.drag.selectecdlog[m]).css('width',b.drag.resultLen*50+"px");
                           //$('#'+selectecdlog[m]).css('background-color', 'bule');
                       }
                       else{
                           $('#'+b.drag.selectecdlog[m]).addClass('hidden');
                       }
                   }
               }
           })
       })(jQuery);
       jQuery(document).ready(function(){
           jQuery("#dataTab").drag();
       })
        </script>
    </body>
</HTML>