js实现单元格的拖动
基础概念
在JavaScript中实现单元格的拖动功能，通常涉及到以下几个基础概念：
- 事件监听：用于捕捉用户的鼠标操作，如按下、移动和释放。
- DOM操作：用于改变页面元素的位置和样式。
- 坐标计算：确定鼠标位置与元素位置的关系，以便正确地移动元素。
优势
- 用户体验：允许用户通过直观的拖放操作来重新排列内容，提高交互性。
- 灵活性：可以轻松地应用于各种布局和设计中。
- 可访问性：对于支持辅助技术的用户来说，拖放操作可以提供更自然的交互方式。
类型
- 内部拖放：在同一页面内的元素之间进行拖放。
- 跨页面拖放：在不同页面或窗口之间进行拖放。
- 跨应用拖放：在不同的应用程序之间进行拖放。
应用场景
- 数据表格：允许用户重新排列表格中的行或列。
- 文件管理器：用户可以通过拖放来移动文件和文件夹。
- 仪表板布局：用户可以自定义仪表板上的小部件位置。
实现步骤
以下是一个简单的示例代码，展示如何使用JavaScript实现单元格的拖动功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and Drop Cells</title>
<style>
table {
border-collapse: collapse;
}
td {
width: 100px;
height: 100px;
border: 1px solid black;
text-align: center;
vertical-align: middle;
cursor: grab;
}
.dragging {
opacity: 0.5;
}
</style>
</head>
<body>
<table id="myTable">
<tr>
<td draggable="true">Cell 1</td>
<td draggable="true">Cell 2</td>
</tr>
<tr>
<td draggable="true">Cell 3</td>
<td draggable="true">Cell 4</td>
</tr>
</table>
<script>
const cells = document.querySelectorAll('td');
let draggedCell = null;
cells.forEach(cell => {
cell.addEventListener('dragstart', dragStart);
cell.addEventListener('dragover', dragOver);
cell.addEventListener('drop', drop);
cell.addEventListener('dragend', dragEnd);
});
function dragStart(e) {
draggedCell = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
this.classList.add('dragging');
}
function dragOver(e) {
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
return false;
}
function drop(e) {
e.stopPropagation();
if (e.target.tagName === 'TD' && e.target !== draggedCell) {
let tempContent = e.target.innerHTML;
e.target.innerHTML = draggedCell.innerHTML;
draggedCell.innerHTML = tempContent;
}
return false;
}
function dragEnd() {
this.classList.remove('dragging');
draggedCell = null;
}
</script>
</body>
</html>可能遇到的问题及解决方法
问题1：单元格拖动后位置不正确
- 原因：可能是因为在
drop事件中没有正确地交换单元格的内容。 - 解决方法：确保在
drop事件中正确地获取和设置单元格的内容。
问题2：拖动时单元格的样式变化不明显
- 原因：可能是因为
.dragging类的样式设置不够明显。 - 解决方法：调整
.dragging类的样式，例如增加透明度变化或其他视觉效果。
问题3：跨浏览器兼容性问题
- 原因：不同的浏览器可能对拖放事件的支持程度不同。
- 解决方法：使用特性检测来确保代码在不同浏览器中都能正常工作，或者使用第三方库如Sortable.js来处理兼容性问题。
通过以上步骤和示例代码，你可以实现基本的单元格拖动功能，并解决一些常见问题。
相关·内容
1回答
我需要帮助实现拖放手势，我想知道你的意见，以找到最好的方法。我想要允许用户拖动其中一个图像视图上的表格视图的每个单元格。基本上，如果没有在其中一个图像视图上释放单元格，则拖放将失败，否则图像视图将根据所放单元格更改图像。
你认为实现这一目标的最好方法是什么？此外，当用户开始拖动时，我希望他拖动一个特定形状<e
浏览 0提问于2012-06-14得票数 0
回答已采纳
我需要帮助实现拖放手势，我想知道你的意见，以找到最好的方法。我想要允许用户拖动其中一个图像视图上的表格视图的每个单元格。基本上，如果没有在其中一个图像视图上释放单元格，则拖放将失败，否则图像视图将根据所放单元格更改图像。
你认为实现这一目标的最好方法是什么？此外，当用户开始拖动时，我希望他拖动一个特定形状<e
浏览 0提问于2013-07-01得票数 2
回答已采纳
我有一个我设计的网页，既可以在我的手机上使用，也可以在PC上使用。UI的一部分是一个表格，其中多个单元格相邻的单元格可以通过向下拖动鼠标(使用Js中的mousedown事件)轻松地标记。然而，在我的智能手机上，当我在单元格之间拖动时，浏览器会尝试滚动窗口。我找了一上午，就是找不到我要找的答案。如何才能使触摸拖动在网页上的行为类似
浏览 7提问于2017-01-03得票数 0
1回答
我正在使用实现拖放。我将指令以角的形式应用于rowTemplate，因此每个单元格都将被拖动和下垂。
在大多数情况下，实际的特性是有效的，我想从它得到的仍然是实现。当我选择一个单元格并将它放到另一个单元时，我想要每个单元格的rowEntity，但是我不知道如何在不触发ng网格事件(如ngStartCellEdit )的情况下获得这个rowEntity。如果我至少可以得到我拖
浏览 5提问于2015-03-24得票数 1
回答已采纳
我有一个带有单元格的UITableView，我希望用户能够通过使用每个单元格右侧的“句柄”向上和向下拖动它们来重新排序。我不想实现“拖放”功能，因为这些单元格后面的数据在这个表之外是没有意义的(考虑到表视图及其单元格后面的数据，实现NSItemProvider看起来是一个丑陋的过程)。到目前为止，一切都已实现&运行良好。看起来有点像的结果。
下一步是，我想
浏览 0提问于2018-12-02得票数 5
1回答
我知道UITableView有一个“编辑”属性，可以让它进入编辑模式(单元格是可移动的和/或可删除的)，但是怎样才能让一个UITableView既可以正常选择又可以移动呢？因此，如果用户点击并按住，他可以上下移动单元格。但如果他只是点击，那么这个细胞就会被选中。
浏览 1提问于2012-07-10得票数 0
回答已采纳
我正在尝试创建一种功能，允许用户通过触摸一个UIView，然后将新创建的UIView拖到屏幕的另一部分，从而创建一个新的UIView。问题是，我可以用两个手势来完成这个任务，但是在我的生活中，我不知道如何用一个手势来完成这个任务。
我已经做了一些广泛的阅读，我找到了一些有希望的答案，但似乎没有一个对我有用。我一直遇到的具体问题是，创建和拖动功能似乎在TableViewCell上运行，但一旦它离开单元格，拖动停止，用户
浏览 1提问于2014-12-14得票数 2
2回答
我有一个带有NSOutlineView (只支持单选)的程序，我希望能够从中拖动元素。这些元素应该以文本或文件的形式接收:例如，将项目放在TextEdit窗口上应放入文本，但将项目放在查找器上应创建一个文件。我不希望任何东西落在我的大纲视图上，即使它来自于它本身。我检查了苹果的NSOutlineView拖放示例，并实现了以下方法(加上一些绝对不相关的方法)：
-(BOOL)outlineView:shouldSelectItem: // I don&
浏览 1提问于2011-03-25得票数 1
回答已采纳
集合视图中的一个单元格包含一个按钮，其中有Touch Down和Touch在里面。这正是我需要的行为。现在，我已经实现了这两种方法来支持重新排序集合视图的单元格：
func co
浏览 1提问于2018-01-10得票数 0
我有一个UITableViewCell，其中我实现了leadingSwipeActionsConfigurationForRowAt indexPath，允许用户向右拖动单元格以将它们添加到他们的收藏夹中但是，在执行此操作时，还会出现向左拖动以删除的选项。我不希望这些单元格被删除。有没有办法在不出现删除操作的情况下实现刷卡操作？
浏览 3提问于2018-02-10得票数 1
回答已采纳
2回答
我想知道如何做到以下几点：一旦它进入编辑模式，我需要单元格保持选中，并给出弹出的效果，在用户的手指下。用户应该能够拖动弹出的单元格并将其重新定位到另一行，而无需抬起手指。我有一个长点击手势识别器，我在长点击手势识别器选择器中将表格设置为编辑。但是，为了拖动当前需要的单元格，我需要举起手指并再次点击来拖动单元格<
浏览 1提问于2012-06-19得票数 12
1回答
我有一个有ID的机构列表，我有相同的列表，但与这张图片的顺序不同：所以我没有按相同的顺序来做，下一步是，这些机构有不同的领域，而有些机构则没有。就像这样的列表：我有一个公式=IF(ISNUMBER(MATCH(C$1,$J2:$O2,0)),"Found","Not Found")，它帮助我查找该行中的区域，但顺序不同--这会给我带来错误，所以我想在范围内查找研究所名称，并查找该机构行中可用的</e
浏览 3提问于2022-06-02得票数 2
我正在实现在区域内拖动单元格。这个部分已经完成，但我也需要动态调整单元格的大小，所以当用户拖动一个单元格时，所有其他单元格都会滑动。我认为在部分中更改项之间的间距应该会迫使部分调整大小，但我无法找到动态更改间距的方法。有人能提点建议吗？
浏览 1提问于2013-10-08得票数 1
回答已采纳
我有一个只有一个部分和许多单元格的UICollectionView。我启用了拖放行为(使用长按压手势识别器，因为UICollectionView位于通用UIViewController中)。我希望拖放行为能够检测被拖动的单元格何时超出了另一个单元格的顶部。谷歌搜索并没有带来任何帮助，但是Stackoverflow有。虽然我可以尝试通过在UIViewController类中编写类似的东西来实现这一点，以检查被拖动的<e
浏览 1提问于2017-08-03得票数 0
回答已采纳
我需要拖动一个表格单元格，在拖动时在鼠标指针下显示它的鬼魂。表完全由d3.js生成。当我在适当的单元格上将拖放属性设置为true时，幽灵映像将如预期的那样出现。.append("td") .attr('draggable', 'true');
但是，由于需要拖动来影响页面上<
浏览 2提问于2015-11-27得票数 1
回答已采纳
2回答
如何在Component 1 Flex网格中实现拖放功能。此外，网格还应允许一些与拖动数据相关的功能，如如果删除了原始项目，则拖动的项目也会被删除。请任何人可以帮助我或建议我，这是如何可能在flex网格。它是一个基于
浏览 1提问于2011-05-09得票数 0
回答已采纳
我尝试在UITableView单元格上手动实现单击和拖动行为(即，不进入编辑模式)。
为此，通过适当地删除和插入行，并将单元格移动到新位置，将单元格滑出移动单元格的方式。然而，事实证明，当数据由NSFetchedResultsController备份时，单元格的移动变得不稳定，因为每个行的删除/插入都会导致NSFetchedResultsController执行大量工作我将其与标准的UIT
浏览 4提问于2012-07-17得票数 0
回答已采纳
我需要实现一个功能，其中单元格显示他们在桌子上的位置。当用户拖动一个单元格时，我需要用新的位置更新数字。我正在使用从iOS 11开始就可用的拖放API，但是在用户拖动单元格时，似乎没有获得更新的索引路径的方法。每个单元格只保留与拖动开始前相同的索引路径。项目A项目B项目C
现在，如果我去<e
浏览 1提问于2020-07-21得票数 1
1回答
我已经实现了UICollectionViewDragDelegate，允许用户拖放集合视图单元格。我还为每个单元格添加了一个UILongPressGestureRecognizer。在长按单元格时，在长按手势状态开始之前识别拖动交互作用。如果您拖动它，它将取消长按手势。这工作得很好。但为了让这两个动作更好地结合在一起，当长按手势被识别(state == .began)时，我想以编程方式取消正在进行的拖动会话-取消它，就像用户松开手指导致单元格<
浏览 22提问于2017-07-19得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
