JavaScript: jak ustawić krok przeciągnij i upuść w tabeli

Question

mam taki kod:

<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> 

i 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

to możliwe, aby przeciągnąć ten element jak inne wtyczki terminarza? W ten sposób: https://dhtmlx.com/docs/products/demoApps/room-reservation-html5-js-php/

Bo teraz mój prostokąt jest wolny. Muszę ustawić to ruchy na siatce tabeli: jak to: https://www.screencast.com/t/EXKQwTwTwkb a nie tak: https://www.screencast.com/t/g6jbP4s9hBX2

Czy można zrobić?

Answer 1

Osobiście nie używałbym przeciągania i upuszczania HTML 5 w tym przypadku, wybrałbym zdarzenia myszy.

Zauważ, że napisałem dla 2-kolumnowej rozpiętości; musisz go poprawić, jeśli chcesz, aby był bardziej elastyczny.

$(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>

Demo: http://plnkr.co/edit/RIhDiu9bI00SJysKvMuu?p=preview

Answer 2

Wystarczy prostszy przykład, ale z tym można korzystać z wielu pól wyboru. Colspan może mieć rozmiar powiązany z .data-cell. Dodałem także właściwość css user-select: none;, aby uniknąć losowego zaznaczania tekstu podczas przeciągania.

$(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>