javascript - 在 html/mvc 中实现对表列的拖放

Question

我有一个基于数据库结果生成表格的网站。我希望用户能够移动表格(嵌套在单元格中)以重新排序。我找到一篇文章 Here这非常接近。所以我试着摆弄一个 jsfiddle但我没法工作。这是 JavaScript:

    var dragSrcEl = null;

function handleDragStart(e) {
    this.style.opacity = '0.4';

    dragSrcEl = this;
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', this.innerHTML);
}

function HandleDragOver(e) {
    if (e.preventDefault) {
        e.preventDefault();
    }


    e.dataTransfer.dropEffect = 'move';
    return false;
}

function handleDragEnter(e) {
    this.classList.Add('over');
}

function handleDragLeave(e) {
    this.classList.remove('over');
}

function handleDrop(e) {
    // this/e.target is current target element.

    if (e.stopPropagation) {
        e.stopPropagation(); // Stops some browsers from redirecting.
    }

    // Don't do anything if dropping the same column we're dragging.
    if (dragSrcEl != this) {
        // Set the source column's HTML to the HTML of the column we dropped on.
        dragSrcEl.innerHTML = this.innerHTML;
        this.innerHTML = e.dataTransfer.getData('text/html');
    }

    return false;
}

function handleDragEnd(e) {


    [].forEach.call(cols, function (col) {
        col.classList.remove('over');
    });
}
var cols = document.querySelectorAll('td.DashPad');
[].forEach.call(cols, function (col) {
    col.addEventListener('dragstart', handleDragStart, false);
    col.addEventListener('dragenter', handleDragEnter, false);
    col.addEventListener('dragover', handleDragOver, false);
    col.addEventListener('dragleave', handleDragLeave, false);
    col.addEventListener('drop', handleDrop, false);
    col.addEventListener('dragend', handleDragEnd, false);
});

它会在移动时改变第一个表格的不透明度，但不会改变其他表格。而且它根本不做拖放。是否可以对包含表格的表格单元格执行我正在尝试执行的操作？

Answer 1

为此，我推荐使用 jQuery。有一种可排序的方法可以很容易地完成这项任务。我所做的只是将 class="sortable" 添加到外表并将所有 javascript 替换为以下内容:

$('.sortable').sortable({items: '.DashPad'});

这是 JSFiddle 上的工作副本 http://jsfiddle.net/d1s5ur48/3/

更多关于 jQuery 可排序: https://jqueryui.com/sortable/