在html/mvc中實現對錶格列的拖放操作

我有一個基於數據庫結果生成表格的網站。我希望用戶能夠移動表格（嵌套在單元格中）來重新排序它們。我發現一篇文章Here，它非常接近。所以我嘗試着用jsfiddle搞亂，但是我沒有太多的工作。這裏的JavaScript的：在html/mvc中實現對錶格列的拖放操作

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); 
});

它改變了第一臺移動時的不透明度，但沒有其他人。而且它根本不會拖放。是否有可能做我想用表格單元格保持表格？

來源

2015-10-12 rigamonk

我爲此推薦jQuery。有一種可以輕鬆完成這項任務的可排序方法。我所做的只是添加class="sortable"外部表，取而代之的是下面所有的javascript：

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

這裏是的jsfiddle http://jsfiddle.net/d1s5ur48/3/

更多關於jQuery的排序工作副本： https://jqueryui.com/sortable/

來源

2015-10-12 17:25:59 asmithdev

在html/mvc中實現對錶格列的拖放操作

回答

相關問題