Question

我花了一些时间搜索，无法在不使用按钮的情况下找到可靠的解决方案。我有一个X高度的表，有很多行。我可以简单地滚动没有问题，并使用我正在使用的插件我可以重新排序行。我正在寻找一种方法从表的一个区域拖动一行到另一个区域，如果需要，以正确的方向滚动表格。我希望做一些像OS桌面文件夹。

Plugin being used for reorder

Answer 1

我想添加一个＆＃34; mousemove＆＃34;在您拖动行的同时将事件发送到所有元素。

每次移动鼠标时，检查它是否在窗口边缘的（100/200/300）px范围内，启动一个间隔循环（setInterval），每隔y秒将屏幕移动x个像素。

您需要确保一旦删除了停止间隔循环的行，并从所有元素中删除了mousemove事件处理程序。当您移出窗口边缘附近的范围时，也应该停止间隔循环。

如果你想知道代码的样子，我会创建一个小提琴，让我知道。

Answer 2

基本上如果你想构建自己的功能，你必须将它添加到你正在使用的不支持的插件上。分析该库以查看它们使用的设计模式，从而了解它们在何处定义它们的功能。一旦你明白了，并且你知道开发人员选择构建他们的插件的道路，你可以扩展它。

假设您单击A而不是拖动到B并释放鼠标像这样的函数的伪代码可能是这样的：

1）关于鼠标按下事件，检查目标是否为A

2）如果是A，将refferance保存到var中的A对象，并将其innerHTML保存在变量中。

3）关于鼠标注册事件，检查目标是否为B

4）如果是B，将其innerHTML复制到A的innerHTML，而不是将保存的innerHTML复制到B

您还可以使用为html元素定义的拖放API html5标准来捕获放置事件。

记忆menegment明智地你应该附加一个事件处理程序来处理表元素事件，如果你有100个标签，例如你不希望100个事件监听器保存在内存中，这是非常的。在jQuery中你可以使用$（elem）.delegate（）;

Answer 3

这就是我最终做的事情：

    $("#table-3 tr").mousedown(function() {
        $(this).mousemove(function(e) {
            // moving upward
            if (e.pageY < mY) {
                console.log('From Bottom');
                clearInterval(intervalLoop);
                intervalLoop = setInterval(function() { 
                    $('#table-3').scrollTop($('#table-3').scrollTop() - 1);
                }, 25);
            // moving downward
            } else {
                console.log('From Top');
                clearInterval(intervalLoop);
                intervalLoop = setInterval(function() { 
                    $('#table-3').scrollTop($('#table-3').scrollTop() + 1);
                }, 25);
            }
            // set new mY after doing test above
            mY = e.pageY;
        });
    }).mouseup(function() {
        $("#table-3 tr").unbind('mousemove');
        clearInterval(intervalLoop);
        intervalLoop = 0;
    });

拖动行的自动滚动表

3 个答案: