拖在HTML表格單元

Fiddle 拖在HTML表格單元

$(document).live('mouseup', function() { 
    flag = false; 
}); 

var colIndex; 
var lastRow; 

$(document).on('mousedown', '.csstablelisttd', function (e) { 
    //This line gets the index of the first clicked row. 
    lastRow = $(this).closest("tr")[0].rowIndex; 

    var rowIndex = $(this).closest("tr").index(); 
    colIndex = $(e.target).closest('td').index(); 
    $(".csstdhighlight").removeClass("csstdhighlight"); 
    if (colIndex == 0 || colIndex == 1) //)0 FOR FULL TIME CELL AND 1 FOR TIME SLOT CELL. 
    return; 
    if ($('#contentPlaceHolderMain_tableAppointment tr').eq(rowIndex).find('td').eq(colIndex).hasClass('csstdred') == false) { 
     $('#contentPlaceHolderMain_tableAppointment tr').eq(rowIndex).find('td').eq(colIndex).addClass('csstdhighlight'); 

     flag = true; 
     return false; 
    } 
});

我正在拖動表格單元格。拖動（向下移動）時，我也必須移動表格滾動。並且我還想選擇單元格反轉（向上方向）。我該怎麼做。

我對tr類做出了選擇。

來源

2013-07-18 John

從什麼瞭解，你想**選擇行**通過拖動鼠標超過他們，而不是向上或向下拖行。是對的嗎？ –

請參考這裏，你會得到一些想法，使用jQuery [表格拖放JQury插件]拖動表格單元格（http://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/ ）[從表上拖放錶行到另一個]（http://stackoverflow.com/questions/14907809/drag-and-drop-table-row-from-one-tabs-）在此先感謝 –

更新的jsfiddle：http://jsfiddle.net/qvxBb/2/

禁用正常的選擇是這樣的：

.myselect { 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: moz-none; 
    -ms-user-select: none; 
    user-select: none; 
}

使用JavaScript處理行選擇像這樣：

// wether or not we are selecting 
var selecting = false; 
// the element we want to make selectable 
var selectable = '.myselect tr:not(:nth-child(1)) td:nth-child(3)'; 

$(selectable).mousedown(function() { 
    selecting = true; 
}).mouseenter(function() { 
    if (selecting) { 
     $(this).addClass('csstdhighlight'); 
     fillGaps(); 
    } 
}); 
$(window).mouseup(function() { 
    selecting = false; 
}).click(function() { 
    $(selectable).removeClass('csstdhighlight'); 
}); 

// If you select too fast, js doesn't fire mousenter on all cells. 
// So we fill the missing ones by hand 
function fillGaps() { 
    min = $('td.csstdhighlight:first').parent().index(); 
    max = $('td.csstdhighlight:last').parent().index(); 
    $('.myselect tr:lt('+max+'):gt('+min+') td:nth-child(3)').addClass('csstdhighlight'); 
}

我只是在HTML中添加了一個類。除了我在這裏展示的所有HTML和CSS都保持不變。

更新的jsfiddle：http://jsfiddle.net/qvxBb/2/

來源

2013-07-27 22:59:01

嗨pinouchon ru有 – John

@Means只是問你的問題...這不是即時通訊。 –

你的桌子有幾個問題，但我會糾正你所要求的。
爲了讓您的桌面滾動，當你的鼠標得到容器外，添加mousedown事件處理程序中的代碼：

$('body').on('mousemove', function(e){ 
    div = $('#divScroll');  
    if(e.pageY > div.height() && (e.pageY - div.height()) > div.scrollTop()) { 
     div.scrollTop(e.pageY - div.height()); 
    } 
});

而這，您mouseup事件處理中：

$('body').off('mousemove');

見updated Fiddle

但現在出現了另一個問題。這是因爲你的代碼的其餘部分。由於鼠標離開列，行未被選中。

來源

2013-07-18 13:30:41 Brewal

感謝您的回覆....單元格選擇是向上還是向下的方向上學生姓名coloumn ..我該怎麼做 – John

嘗試刪除return false;內

$('#contentPlaceHolderMain_tableAppointment tr').eq(rowIndex).find('td').eq(colIndex).addClass('csstdhighlight'); 
    flag = true; 
    return false; //Remove this line 
}

因爲return false;停止瀏覽器的默認行爲（自動滾動）。

DEMO

來源

2013-07-18 13:59:16

汗我必須上升和下降的方向上學生名稱coloumn ...不是第一和第二列... \ – John

拖在HTML表格單元

回答

相關問題