jQuery-----实现拖拽td单元格到其他上面，实现td内容交换的源码分析

基于jQuery，实现td单元格的拖拽和交换

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<style>
td.hover{border:dotted 3px #f00 }
td.selected{background:#f00;color:#fff;}
td.disabled{background:#eee;color:#000}
#tdMove{position:absolute;display:none;border:dotted 3px #f00;background:#fff}
table{user-select:none;-moz-user-select:none}</style>
<table border="1">
<script>
        var s = ''
        for (var i = 0; i < 10; i++) {
            s += '<tr>'
            for (var j = 0; j < 10; j++) s += '<td' + (Math.random() > 0.8 ? ' class="disabled"' : '') + '>' + i + '-' + j + '</td>'
            s += '</tr>'
        }
        document.write(s)
    </script>
</table>
<div id="tdMove"></div>
<script>
    var tdMove = $('#tdMove'),px=5;//浮动块偏移量，不偏移鼠标移动过程会出现在这个div移动的情况，移动到td上无法响应高亮样式
    $('td:not(.disabled)').mousedown(function (e) {
        this.className = 'selected'
        tdMove.html(this.innerHTML).css({ left: e.clientX + px, top: e.clientY + px }).show();;
        $(document).mousemove(function (e) {
            var el = e.target;
            tdMove.css({ left: e.clientX + px, top: e.clientY + px });
            if (el.tagName == 'TD' && el.className != 'disabled' && el.className != 'selected') {
                $('td').removeClass('hover'); el.className = 'hover';
            }
        }).mouseup(function () {
            $(document).unbind();

            tdMove.hide();
            var td = $('td.hover,td.selected')
            if (td.length == 2) {
                var s = td[1].innerHTML;
                td[1].innerHTML = td[0].innerHTML;
                td[0].innerHTML = s;
            }
            td.removeClass('hover selected')
        });
    })
</script>

---

分析

重点：
定义空的浮动元素
<div id="tdMove"></div>

---

css样式:
td.hover{border:dotted 3px #f00 } 鼠标经过表格元素是的样式

td.selected{background:#f00;color:#fff;} mousedown（鼠标按下）事件,td的样式

td.disabled{background:#eee;color:#000} 不能拖拽的表格元素的样式

#tdMove{position:absolute;display:none;border:dotted 3px #f00;background:#fff} 浮动元素的样式

---

jQuery：

获取浮动元素并设置偏移量：var tdMove = $('#tdMove'),px=5;

在可以选取的表格元素的mousedown（鼠标按下）事件：

$('td:not(.disabled)').mousedown(function (e) {
        //将当前元素的class设置为'selected'
        this.className = 'selected' ;
        //设置浮动元素的html值和css样式用show()方法显示
        tdMove.html(this.innerHTML).css({ left: e.clientX + px, top: e.clientY + px }).show();
        //鼠标移动事件
        $(document).mousemove(function (e) 
            //获取当前移动位置的表格元素
            var el = e.target;
            //浮动元素移动
            tdMove.css({ left: e.clientX + px, top: e.clientY + px });
            //判断当前元素是否为表格元素，元素是否可选择，且不为mousedown元素
            if (el.tagName == 'TD' && el.className != 'disabled' && el.className != 'selected') {
                //鼠标所在位置样式改变
                $('td').removeClass('hover'); el.className = 'hover';
            }
        })

鼠标放开的mouseup事件，更改td内容

.mouseup(function () {
            //移除所有元素的事件处理器
            $(document).unbind();
            //浮动元素隐藏
            tdMove.hide();
            //获取到样式为td.hover,td.selected的要交换的两个表格元素
            var td = $('td.hover,td.selected')
            //进行交换
            if (td.length == 2) {
                var s = td[1].innerHTML;
                td[1].innerHTML = td[0].innerHTML;
                td[0].innerHTML = s;
            }
            //清除样式
            td.removeClass('hover selected')
        });