JavaScript的：如何設置表

Question

拖和下降步驟我有這樣的代碼：

<div class="table-area"> 
    <table> 
    <thead> 
     <tr> 
     <th>someDate</th> 
     <th>1</th> 
     <th>2</th> 
     <th>3</th> 
     </tr> 
    </thead> 

    <tbody> 
     <tr> 
     <td>someDateVal1</td> 
     <td class="data-cell"></td> 
     <td class="data-cell"></td> 
     <td class="data-cell"></td> 
     </tr> 
     <tr> 
     <td>someDateVal2</td> 
     <td class="data-cell"></td> 
     <td class="data-cell"></td> 
     <td class="data-cell"></td> 
     </tr> 
    </tbody> 
    </table> 

    <div class="table-area-selected" 
    draggable="true"></div> 
</div> 

和JS：

$(function() { 

    var selected = $('.table-area-selected'); 

    var cell = $('table').find('.data-cell'); 


    selected.css('width', $(cell[0]).outerWidth() * 2); 
    selected.css('height', $(cell[0]).outerHeight()); 


    selected.css('top', $(cell[0]).position().top); 
    selected.css('left', $(cell[0]).position().left); 

    $('.table-area-selected').on('dragstart', function(event) { 
    console.log('drag', event); 
    }); 

    $('table').on('drop', function(event) { 
    var selected = $('.table-area-selected'); 

    var cell = event.target; 

    console.log('drop', event); 


    selected.css('width', $(cell).outerWidth() * 2); 
    selected.css('height', $(cell).outerHeight()); 


    selected.css('top', $(cell).position().top); 
    selected.css('left', $(cell).position().left); 
    }); 

    $('table').on('dragover', function(event) { 
    event.preventDefault(); 
    }); 


}); 

https://plnkr.co/edit/NpRHbgHnUgGfgAOJnSTw?p=preview

是否有可能拖累這一項目像其他日程安排插件？像這樣：https://dhtmlx.com/docs/products/demoApps/room-reservation-html5-js-php/

因爲現在我的矩形是空閒的。我需要設置它在表網格的運動：像這樣： https://www.screencast.com/t/EXKQwTwTwkb ，而不是這樣的： https://www.screencast.com/t/g6jbP4s9hBX2

是否有可能呢？

Answer 1

就我個人而言，我不會在這種情況下使用HTML 5拖放，我會選擇鼠標事件。

請注意，我已經寫了一個2列跨度;如果你希望它更靈活，你需要調整它。

$(function() { 
 

 
    var isDragging = false; 
 

 
    var $selected = $('.table-area-selected'); 
 

 
    var $cells = $('table').find('.data-cell'); 
 
    var colSpan = 2; 
 
    var $currentCell = $($cells[0]); 
 
    var cellWidth = $currentCell.outerWidth(); 
 

 
    $selected.css('width', cellWidth * colSpan); 
 
    $selected.css('height', $currentCell.outerHeight() - 2); // fiddle factor 
 
    $selected.css('top', $currentCell.position().top); 
 
    $selected.css('left', $currentCell.position().left); 
 

 
    // drag start 
 
    $selected.mousedown(dragStart); 
 

 
    // drag end 
 
    $(window).mouseup(dragEnd); 
 

 
    // drag over cells 
 
    $cells.mouseenter(draggingIntoNewCell); 
 
    $selected.mousemove(draggingInSelectedCell); 
 

 

 
    function dragStart() { 
 
    isDragging = true; 
 
    } 
 

 
    function dragEnd() { 
 
    isDragging = false; 
 
    } 
 

 
    function draggingIntoNewCell() { 
 
    $currentCell = $(this); 
 
    reposition($currentCell); 
 
    } 
 

 
    // find if we've moved into the next column under this selection 
 
    function draggingInSelectedCell(e) { 
 

 
    if (isDragging) { 
 

 
     // find relative position within selection div 
 
     var relativeXPosition = (e.pageX - $(this).offset().left); 
 

 
     if (relativeXPosition > cellWidth) { // moved into next column 
 
     $currentCell = $currentCell.next(); 
 
     reposition($currentCell); 
 
     } 
 
    } 
 
    } 
 

 
    function reposition($cell) { 
 

 
    // only reposition if not the last cell in the table (otherwise can't span 2 cols)  
 
    if (isDragging && $cell.next().hasClass('data-cell')) { 
 
     $selected.css('top', $cell.position().top); 
 
     $selected.css('left', $cell.position().left); 
 
    } 
 
    } 
 

 
});

table th, 
 
table td { 
 
    padding: 8px 40px; 
 
    border: 1px solid #cecece; 
 
    position: relative; 
 
    -moz-user-select: none; 
 
    -webkit-user-select: none; 
 
    -ms-user-select: none; 
 
} 
 

 
.table-area-selected { 
 
    position: absolute; 
 
    background: green; 
 
    border: 1px solid blue; 
 
    cursor: pointer; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <h1>Hello Plunker!</h1> 
 

 
    <div class="table-area"> 
 
    <table> 
 
     <thead> 
 
     <tr> 
 
      <th>someDate</th> 
 
      <th>1</th> 
 
      <th>2</th> 
 
      <th>3</th> 
 
      <th>4</th> 
 
     </tr> 
 
     </thead> 
 

 
     <tbody> 
 
     <tr> 
 
      <td>someDateVal1</td> 
 
      <td class="data-cell"></td> 
 
      <td class="data-cell"></td> 
 
      <td class="data-cell"></td> 
 
      <td class="data-cell"></td> 
 
     </tr> 
 
     <tr> 
 
      <td>someDateVal2</td> 
 
      <td class="data-cell"></td> 
 
      <td class="data-cell"></td> 
 
      <td class="data-cell"></td> 
 
      <td class="data-cell"></td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 

 
    <div class="table-area-selected"></div> 
 
    </div> 
 
</body> 
 

 
</html>

演示：http://plnkr.co/edit/RIhDiu9bI00SJysKvMuu?p=preview

Answer 2

只是一個簡單的例子，但這個你可以使用多個選擇框。 Colspan可以與.data-cell大小有關。我還添加了user-select: none; css屬性以避免在拖動時進行隨機文本選擇。

$(function() { 
 
    var dragging = false; 
 
    var selected = null; 
 
    var cell = $('table').find('.data-cell'); 
 

 
    $('.table-area-selected').each(function(index) { 
 
    $(this).css('top', $(cell.get(index)).position().top); 
 
    $(this).css('left', $(cell.get(index)).position().left); 
 

 
    $(this).css('width', $(cell.get(index)).innerWidth()); 
 
    $(this).css('height', $(cell.get(index)).innerHeight()); 
 
    }); 
 

 
    $('.table-area-selected').on('mousedown', function(event) { 
 
    console.log('mousedown'); 
 
    selected = $(this); 
 
    dragging = true; 
 

 
    }); 
 

 
    $(window).on('mouseup', function(event) { 
 
    console.log('mouseup'); 
 
    selected = null; 
 
    dragging = false; 
 
    }); 
 

 
    $('.data-cell').on('mouseover', function(event) { 
 
    var cell = $(this); 
 
    if (dragging) { 
 
     selected.css('top', cell.position().top); 
 
     selected.css('left', cell.position().left); 
 

 
     selected.css('width', cell.innerWidth()); 
 
     selected.css('height', cell.innerHeight()); 
 
     console.log('dragged a selection box : ' + selected); 
 
    } 
 
    }); 
 

 
});

table th, 
 
table td { 
 
    padding: 10px 50px; 
 
    border: 1px solid #cecece; 
 
} 
 

 
.table-area { 
 
    position: relative; 
 
    -webkit-user-select: none; 
 
    /* Chrome, Opera, Safari */ 
 
    -moz-user-select: none; 
 
    /* Firefox 2+ */ 
 
    -ms-user-select: none; 
 
    /* IE 10+ */ 
 
    user-select: none; 
 
    /* Standard syntax */ 
 
} 
 

 
.table-area-selected { 
 
    position: absolute; 
 
    background: green; 
 
    border: 1px solid blue; 
 
    cursor: pointer; 
 
} 
 

 
.data-cell {}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <h1>Hello Plunker!</h1> 
 

 
    <div class="table-area"> 
 
    <table> 
 
     <thead> 
 
     <tr> 
 
      <th>someDate</th> 
 
      <th>1</th> 
 
      <th>2</th> 
 
      <th>3</th> 
 
     </tr> 
 
     </thead> 
 

 
     <tbody> 
 
     <tr> 
 
      <td>someDateVal1</td> 
 
      <td class="data-cell"></td> 
 
      <td class="data-cell"></td> 
 
      <td class="data-cell"></td> 
 
     </tr> 
 
     <tr> 
 
      <td>someDateVal2</td> 
 
      <td class="data-cell"></td> 
 
      <td class="data-cell"></td> 
 
      <td class="data-cell"></td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 

 
    <div class="table-area-selected"></div> 
 
    <div class="table-area-selected"></div> 
 
    </div> 
 
</body> 
 

 
</html>