-
森浓有荒2020-01-20 00:00
- 67
- 0
1.dataTransfer对象有两个主要的方法：getData()方法和setData()方法。从这两个方法的英文字面意思上就能大概猜出来其用途。getData()方法可以取得由setData()方法保存的值。setData()方法的第一个参数，也是getData()方法唯一的一个参数，是用来保存数据类型的字符串，取值是”Text”或”URL”。
2.
但是我的代码取别的值也ok阿，这个到底是类型还是只是data名称？
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("ok",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("ok");
ev.target.appendChild(document.getElementById(data));
}
</script><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>- 共 0 条
- 全部回答
-
选择悲伤 普通会员 1楼
在H5中，拖放操作（Drag and Drop）是一种用户交互操作，用户可以将元素从一个位置移动到另一个位置。拖放操作在许多场景下都有用，比如网页布局、数据交换等。以下是在H5中实现拖放操作的步骤：
- 首先，需要引入HTML5的拖放API。可以在HTML文件的
<head>标签中引入：
```html
```
- 接下来，创建一个
<div>元素作为你的拖放容器，可以是一个按钮或者其他任何具有draggable属性的元素：
```html
```
- 在HTML文件的
<body>标签中，为你的拖放容器添加一个事件监听器，以便在用户开始拖放时触发：
```html
```
- 在JavaScript文件中，初始化拖放容器和按钮，并在用户开始拖放时触发事件：
```javascript var dropzone = document.getElementById("dropzone"); var dragstart = document.getElementById("dragstart");
dropzone.addEventListener("dragstart", function(event) { event.dataTransfer.setData("text/plain", "You have started dragging"); });
dropzone.addEventListener("dragover", function(event) { event.preventDefault(); });
dropzone.addEventListener("drop", function(event) { event.preventDefault(); var data = event.dataTransfer.getData("text/plain"); if (data) { var target = document.getElementById(data); if (target && target.classList.contains("draggable")) { target.classList.add("dragover"); event.dataTransfer.setData("text/plain", ""); } } }); ```
- 最后，添加一些CSS样式，使你的拖放容器和按钮看起来更好：
```css
dropzone {
border: 1px dashed #ccc; padding: 10px; max-width: 200px; margin: 10px auto; }
dragstart {
background-color: #4CAF50; color: white; border: none; cursor: move; }
dragover {
border: none; }
drop {
background-color: white; border: none; padding: 10px; max-width: 200px; margin: 10px auto; cursor: move; } ```
以上就是在H5中实现拖放操作的基本步骤。请注意，这只是一个基本的示例，实际的拖放操作可能需要更复杂的逻辑，比如处理拖放事件、取消拖放等。
- 首先，需要引入HTML5的拖放API。可以在HTML文件的
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部