我有这样的代码：
<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
有可能吗？
解决方法
我个人不会在这种情况下使用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>
