- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在我的一列 n 行的 HTML 表中,例如:
<table id="my-table">
<tr>
<td>How</td>
</tr>
<tr>
<td>Are</td>
</tr>
<tr>
<td>You</td>
</tr>
</table>
<td>
标签:
draggable="true" ondragstart="dragCell(event)" ondragover="allowDrop(event)" ondrop="dropCell(event)" ondragenter="handleDragEnter(event)" ondragleave="handleDragLeave(event)" ondragend="handleDragEnd(event)"
/*##############################################################################
## 1. Dragstart Handler ##
##############################################################################*/
function dragCell(ev) {
let draggedRow = ev.target.closest("tr");
let rowNumber = draggedRow.rowIndex;
let tableId = draggedRow.parentNode.parentNode.getAttribute("id");
let data = {"id":tableId,"rowNumber":rowNumber};
let cellsdragged = draggedRow.children;
let amountOfCells = cellsdragged.length;
let dataToTransfer = [];
for (let i = 0; i < amountOfCells; i++) {
let currentCell = cellsdragged[i];
dataToTransfer.push(currentCell.outerHTML);
}
data["cellContents"] = dataToTransfer;
data = JSON.stringify(data);
ev.dataTransfer.setData("text/plain",data);
document.getElementsByTagName("body")[0].style.cursor = "grabbing";
}
/*##############################################################################
## 2. Dragover Handler ##
##############################################################################*/
function allowDrop(ev) {
ev.preventDefault();
}
/*##############################################################################
## 3. Drop Handler ##
##############################################################################*/
function dropCell(ev) {
ev.preventDefault();
if (ev.stopPropagation) {
ev.stopPropagation();
}
document.getElementsByTagName("body")[0].style.cursor = "default";
let data = ev.dataTransfer.getData("text/plain");
data = JSON.parse(data);
let rowToDrop = ev.target.closest('tr');
let targetIndex = rowToDrop.rowIndex;
let targetId = rowToDrop.parentNode.parentNode.getAttribute("id");
if (data.id == targetId && data.rowNumber != targetIndex) {
let targetContents = [];
let cellsForDrop = rowToDrop.children;
let amountOfCells = cellsForDrop.length;
for (let i = 0; i < amountOfCells; i++) {
targetContents
.push(cellsForDrop[i].outerHTML);
}
let draggedRow = document.getElementById(data.id).rows[data.rowNumber];
let cellsOfDrag = draggedRow.children;
for (let i = 0; i < amountOfCells; i++) {
cellsForDrop[i].outerHTML = data.cellContents[i][0];
cellsOfDrag[i].outerHTML = targetContents[i][0];
}
}
}
/*##############################################################################
## 4. Dragenter Handler ##
##############################################################################*/
function handleDragEnter(ev) {
ev.target.closest('tr').classList.add('ready-for-drop');
}
/*##############################################################################
## 5. Dragleave Handler ##
##############################################################################*/
function handleDragLeave(ev) {
ev.target.closest('tr').classList.remove('ready-for-drop');
}
/*##############################################################################
## 6. Dragend Handler ##
##############################################################################*/
function handleDragEnd(event) {
let rows = ev.target.closest("table").rows;
let amount = rows.length;
for (let i = 0; i < amount; i++) {
if (rows[i].classList.contains('ready-for-drop')) {
rows[i].classList.remove('ready-for-drop')
}
}
}
ev.target.closest
的错误。 ,对于 Dragenter、Dragleave 和 Dragend Handler 函数,总是说
ev.target.closest is not a function
.尽管我在 dragstart 处理程序函数中使用完全相同的语法,但在该行的控制台中没有报告错误。拖完后,拖拽行的内容都变成
<
.
outerHTML
要交换,因为我的
<td>
标签可能包含特定于单元格的属性值。
最佳答案
好的想出了一个解决方案,最重要的事实:
addEventListener
而不是 HTML 标记内的 HTML 内联事件监听器,如上所述,有几个原因(我不会在这里进一步说明)dragleave
我的解决方案中的事件监听器,所以这可能是实现我想要的更简单的方法之一,这就是为什么我想在这里分享它给其他可能想要做我想做的类似事情的人。 draggable="true" class="table-cell"
在
td
标签
/*##############################################################################
## 1. Define Function which adds all the required event listeners ##
##############################################################################*/
function addDragEvents(element) {
element.addEventListener("dragstart",dragCell);
element.addEventListener("dragover",allowDrop);
element.addEventListener("drop",dropCell);
element.addEventListener("dragenter",handleDragEnter);
element.addEventListener("dragend",handleDragEnd);
}
/*##############################################################################
## 2. Define Function which resets the drag state for the concerned table ##
##############################################################################*/
function resetDragState(e) {
let data = e.dataTransfer.getData("text/plain");
data = JSON.parse(data);
let rows = document.getElementById(data.id).rows;
for (let row of rows) {
if (row.classList.contains('ready-for-drop')) {
row.classList.remove('ready-for-drop');
}
let cells = row.cells;
for (let cell of cells) {
cell.style.cursor="pointer";
}
}
}
/*##############################################################################
## 3. Add Required Event listeners to all table cells ##
##############################################################################*/
let cells = document.getElementsByClassName('table-cell');
for (let cell of cells) {
addDragEvents(cell);
}
/*##############################################################################
## 4. Dragstart Handler ##
##############################################################################*/
// This function is created to define the action of a drag (which data will be
// taken for transfer to the HTML element into which the dragged element's
// content will be dropped)
function dragCell(e) {
// Change the cursor to a grabbing hand on dragstart
let cells = document.getElementsByClassName('table-cell');
for (let cell of cells) {
cell.style.cursor="grabbing";
}
// Three pieces of information must be transferred for the drag & drop to work
// properly: the table id of the table having the row being dragged (to assure
// that D&D only works among rows of the same table), the row index of the row
// being dragged (to know which row needs to be replaced via the drop
// function), and finally the content of the row being dragged
let draggedRow = e.target.closest("tr");
// Get the row index of that row
let rowNumber = draggedRow.rowIndex;
// Get the id name of the table having that row
let tableId = draggedRow.parentNode.parentNode.getAttribute("id");
// Initiate JSON object which will be transferred to the drop row
let data = {"id":tableId,"rowNumber":rowNumber};
// Append all the cells as second element onto this same object
let cellsdragged = draggedRow.children;
let amountOfCells = cellsdragged.length;
let dataToTransfer = [];
for (let i = 0; i < amountOfCells; i++) {
let currentCell = cellsdragged[i];
dataToTransfer.push(currentCell.outerHTML);
}
data["cellContents"] = dataToTransfer;
data = JSON.stringify(data);
e.dataTransfer.setData("text/plain",data);
}
/*##############################################################################
## 5. Dragover Handler ##
##############################################################################*/
// This function is used to allow for drops into the corresponding HTML elements
// (the default behavior doesn't allow this)
function allowDrop(e) {
e.preventDefault();
}
/*##############################################################################
## 6. Drop Handler ##
##############################################################################*/
function dropCell(e) {
// First, prevent default behavior once again
e.preventDefault();
// Second, access data coming from dragged element (which is the index of the
// row from which data is being dragged)
let data = e.dataTransfer.getData("text/plain");
data = JSON.parse(data);
// Next, get the index of the row into which content shall be dropped
let rowToDrop = e.target.closest('tr');
let targetIndex = rowToDrop.rowIndex;
// Next, get the id of the table of that retrieved row
let targetId = rowToDrop.parentNode.parentNode.getAttribute("id");
// Next, only proceed if the dragged row comes from the same table as the
// target row, and if the dragged and the target rows are two different rows
if (data.id == targetId && data.rowNumber != targetIndex) {
// Store the contents of the target row in the same array structure as the
// one coming from the dragged row
let targetContents = [];
// Exchange the contents of the two rows
let cellsForDrop = rowToDrop.children;
let amountOfCells = cellsForDrop.length;
for (let i = 0; i < amountOfCells; i++) {
targetContents
.push(cellsForDrop[i].outerHTML);
}
// Exchange the contents of the two rows
let draggedRow = document.getElementById(data.id).rows[data.rowNumber];
let cellsOfDrag = draggedRow.children;
for (let i = 0; i < amountOfCells; i++) {
// Replace the content of the row into which the drag is being dropped
// with the content of the dragged row
cellsForDrop[i].outerHTML = data.cellContents[i];
// Replacement of the outerHTML deletes all bound event listeners, so:
addDragEvents(cellsForDrop[i]);
// And now, replace the content of the dragged row with the content of the
// target row. Then, do the same for the value.
cellsOfDrag[i].outerHTML = targetContents[i];
addDragEvents(cellsOfDrag[i]);
}
resetDragState(e);
}
}
/*##############################################################################
## 7. Dragenter Handler ##
##############################################################################*/
// When dragging over the text node of a table cell (the text in a table cell),
// while previously being over the table cell element, the dragleave event gets
// fired, which stops the highlighting of the currently dragged cell. To avoid
// this problem and any coding around to fight it, everything has been
// programmed with the dragenter event handler only; no more dragleave needed
// For the dragenter event, e.target corresponds to the element into which the
// drag enters. This fact has been used to program the code as follows:
var previousRow = null;
function handleDragEnter(e) {
// Assure that dragenter code is only executed when entering an element (and
// for example not when entering a text node)
if (e.target.nodeType === 1) {
// Get the currently entered row
let currentRow = this.closest('tr');
// Check if the currently entered row is different from the row entered via
// the last drag
if (previousRow !== null) {
if (currentRow !== previousRow) {
// If so, remove the class responsible for highlighting it via CSS from
// it
previousRow.className = "";
}
}
// Each time an HTML element is entered, add the class responsible for
// highlighting it via CSS onto its containing row (or onto itself, if row)
currentRow.className = "ready-for-drop";
// To know which row has been the last one entered when this function will
// be called again, assign the previousRow variable of the global scope onto
// the currentRow from this function run
previousRow = currentRow;
}
}
/*##############################################################################
## 8. Dragend Handler ##
##############################################################################*/
// This function is required for cases where the dragged has been dropped on a
// non-valid drop target.
function handleDragEnd(e) {
resetDragState(e);
}
关于javascript - 拖放 API 和表格行(仅限 vanilla JS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62138942/
它是链接中的框架 https://vanillaforums.com/en/software/ ? 解释是什么?有哪些链接? 最佳答案 Vanilla PHP 就是 PHP 本身。 一般来说,术语va
如何使用 vanilla javascript 将按键模拟为输入? 我已经在 SO 和其他地方测试了所有可能的答案,但它在 Chrome 或 Firefox 上不起作用。 例如,假设我们有一个表单:
This answer作者 Jan Burse 展示了 Prolog 中元解释器的最简单实现之一: solve(true) :- !. solve((A,B)) :- !, solve(A), sol
赏金 我在谷歌上搜索它以找到类似的库,但我没有找到......如果有人知道你可以给出答案(仅限 Vanilla js 库和麻省理工学院许可证)...... 否则不要更改 html 结构...修复我的代
我是Rust的新手,试图了解基本的目录遍历。我发现的几乎所有示例都利用了walkdir或glob库,这些库我都取得了很好的成功。但是,我现在正尝试仅使用std lib来执行此操作。 标准lib文档中有
我正在尝试通过事件监听器只需单击一次即可触发函数。但如果我在一次单击后不执行 F5 触发操作,则会在两次单击(第一次)后发生。 代码: HTML ....
我的单页网站在 vanilla js 中有一个平滑的滚动,我尝试在没有 jquery 的情况下实现它,我想添加一个像 cubic bezier 这样的计时函数。有没有办法在 javascript 中做
对于一个小项目,我想制作一个基于浏览器引擎检测浏览器的小型库: var engine = { opera: function(){ var ua = navigator.userAgent.t
嘿,我想弄清楚如何让我的脚本在加载元素时等待执行它的一部分,但目前它主要只是传递它,而不是等待它。在 vanilla js 中最好的方法是什么? 这是代码 this.heading = documen
我正在复制一个 simon 游戏原型(prototype),我正在尝试在 vanilla js 中为按钮闪烁编写一个函数。 目前我有以下功能: function blinkColor(color) {
我正在构建一个类似于 eclipse 刻草图的交互式网格。我已经设置了网格,现在正在尝试设置“悬停”效果,以便当鼠标经过网格 div 时改变颜色,从而像钢笔一样在网格中留下(像素化)轨迹。但我希望颜色
我正在为我在大学的一个科目开发一个元素,包括用纯 javascript 做一个下拉列表过滤器,以过滤 html/css 中的图像网格。导致我出现问题的是这个过滤器需要同时处理 3 个下拉列表。例如,如
我有一个带有主要 div 的简单旋转木马。在主 div 中有一个宽度为 6000px 的 ul,每当我单击向右或向左箭头时,它就会滑动。 我将事件监听器附加到两个箭头,所以当我单击左箭头时,我将 30
我正在研究构造 Vanilla 网络组件。我以前使用过 Polymer,我喜欢这样一个事实,即您可以在一个文件中为您的组件提供模板、样式和 JavaScript。如果可能的话,我想用“ Vanilla
我找到了这个粘性 div 代码段并对其进行了修改,使其在 div 到达页面顶部时看起来粘在窗口底部。我只是好奇是否有某种方法可以抵消底部。这是代码:- let Sticky = (function()
所以我遇到了这个问题,我需要根据一些变量为复选框设置一个值。 问题是我在将要使用的 HTML 上遇到了下一个命名约定: 要决定选择哪个输入,我通常会这样做: document.getEleme
我正在练习 VHDL,我有一个关于不需要过程的“简单”语句的基本问题。 我想知道两者的区别 c <= a and b; 语句不在进程内,只是在架构开始之后编写,并且 process(a,b) begi
在客户处,我们的一个 WPF 应用程序开始挂起。在尝试使用最小的工作示例重现问题时,我发现即使是最基本的(非平凡的)WPF 应用程序也会卡在该机器上。 示例 A : 在 Visual Studio 2
我按照教程制作了一个使用 localstorage 的购物车。现在我正在尝试对其进行调整以适应我自己的需要,以扩展我对 JavaScript 的知识并给自己更多的练习。讲师为每个单独的项目总计做了一个
我需要修改 Vanilla 元解释器,以便进行有限深度的搜索。我正在使用以下代码来测试我的解决方案: value(wire1,1). connected(wire2, wire1). connecte
我是一名优秀的程序员,十分优秀!