怎么用jquery实现拖拽td单元格到其他上面,实现td内容交换

拖动单元格到其他单元格上,2个单元格内容相互交换,并且限制有限单元格不能拖拽,能拖动的单元格也不能和这些限制单元格交换内容

4个回答

参考这个,居于jquery的

 <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>
VipperSeven
VipperSeven 初学者表示仰望
接近 2 年之前 回复

td不能拖拽吧!,但是td里面的内容可以啊!在td里面再写一层长高100%的盒子

windows2003服务器,静态页访问没有问题,访问asp.net的aspx页面,包括asp页面,都提示连接被重置,无法打开页面。事件管理器中一直报下面2个错误。
1,由于无法创建应用程序域,因此未能执行请求。错误: 0x80070005 拒绝访问。
2,未能初始化 AppDomain:/LM/W3SVC/1635210705/Root

Exception: System.IO.FileLoadException

Message: 未能加载文件或程序集“System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a”或它的某一个依赖项。拒绝访问。
网上找了下说是IIS6程序池用户没有访问framework或者网站的权限,但是本人确认100%已经加上。甚至将程序池以"本地系统"运行还是会出现上面2个错误。

m0_37154850
小皮球飞呀飞 我靠,发错了
接近 2 年之前 回复

总共分两步,第一步是拖拽(包括的对原td的拖拽,然后跟随鼠标的位置,最后判断停止的位置)
这一步可以通过mousedown这种事件里面让你要拖动的盒子定位,然后计算鼠标在当前位置的坐标,盒子的位置加上偏移量就可以了。然后就是判断mouseup
事件里面的东西了,判断方式有很多种,看你要怎么判断,判断鼠标位置是不是在目标的四角坐标的范围内。
第二步就是切换内容了,如果判断在范围内就换内容,至于不能拖动和不能交换内容的可以立个flag如果有这个flag,return回去就行了。

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问