利用HTML5新特性实现拖拽交换表格单元格元素

最新推荐文章于 2023-10-14 12:41:19 发布

阿澈279

最新推荐文章于 2023-10-14 12:41:19 发布

阅读量718

点赞数

文章标签： html5 javascript 前端

本文链接：https://blog.csdn.net/qq_43658537/article/details/120880748

版权

本文介绍了如何利用HTML5的拖放新特性实现表格单元格的拖拽交换功能，详细讲解了拖放事件如ondragstart、ondragover和ondrop的使用，并分享了项目实践中遇到的问题及解决策略。

摘要由CSDN通过智能技术生成

利用HTML5新特性实现拖拽交换表格单元格元素

HTML5新特性：拖放

拖放

拖放（Drag 和 Drop）是很常见的特性。它指的是您抓取某物并拖入不同的位置。

拖放是 HTML5 标准的组成部分：任何元素都是可拖放的。

浏览器支持

表格中的数字指示了完全支持拖放的首个浏览器版本。
在这里插入图片描述

HTML 拖放实例

下列是关于拖放的简单例子：

实例

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
     
    ev.preventDefault();
}

function drag(ev) {
     
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
     
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69

最低0.47元/天解锁文章

阿澈279

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
利用HTML5新特性实现拖拽交换表格单元格元素

利用HTML5新特性实现拖拽交换表格单元格元素HTML5新特性：拖放拖放拖放（Drag 和 Drop）是很常见的特性。它指的是您抓取某物并拖入不同的位置。拖放是 HTML5 标准的组成部分：任何元素都是可拖放的。浏览器支持表格中的数字指示了完全支持拖放的首个浏览器版本。HTML 拖放实例下列是关于拖放的简单例子：实例<!DOCTYPE HTML><html><head><script>function allowDrop(ev)
复制链接

扫一扫