HTML5拖动

叁歲伎倆 2022-08-23 09:58 172阅读 0赞

1.  
![这里写图片描述][20160614093625780]

<style type="text/css"> #div1, #div2  { float:left; width:100px; height:35px; margin:10px;border:1px solid #aaaaaa;} </style>
    <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)">//拖动时组织浏览器默认行为
      <img src="../images/1.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
     </div>//设置被拖数据的数据类型和值,drag(event)
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

解析：  
为了使图像能够被拖动，设置draggable属性为true  
当放置被拖动数据时，会发生drop事件，进入函数。preventDefault（）来避免浏览器对数据的默认处理（默认以链接的形式打开）  
通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。  
被拖数据是被拖元素的 id (“drag1”)  
把被拖元素追加到放置元素（目标元素）中

[20160614093625780]: /images/20220721/26e90f5afe544533a27d14157568d778.png

发表评论取消回复

表情：

评论列表（有 0 条评论，172人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5简介_HTML5简介

html5简介 ![htmlcss2thumb][] The following is an extract from our book, [HTML5 & CSS3 fo

左手的ㄟ右手/ 2022年12月03日 09:43/ 0 赞/ 315 阅读

相关 HTML5拖动

1. ![这里写图片描述][20160614093625780] <style type="text/css"> div1, div2 <!--定义两个装图片的盒

叁歲伎倆/ 2022年08月23日 09:58/ 0 赞/ 173 阅读

相关 HTML5

HTML5 了解HTML5 HTML5 是 HTML 标记语言的一个最新版本 HTML5 制定了web应用开发的一系列标准, 成为第一个将web作为应用

小咪咪/ 2022年06月12日 06:18/ 0 赞/ 208 阅读

相关 HTML&HTML5

HTML&HTML5 学习笔记职坐标网上视频课程 ![这里写图片描述][SouthEast] ![这里写图片描述][SouthEast 1] ![这里写图片描述

梦里梦外;/ 2022年06月05日 07:46/ 0 赞/ 365 阅读

相关 [html5]表格拖动

表格拖动前： ![表格拖动前][SouthEast] 表格拖动后： ![表格拖动后][SouthEast 1] 实现代码： function dragF

刺骨的言语ヽ痛彻心扉/ 2022年06月03日 04:09/ 0 赞/ 193 阅读

相关 HTML5 -canvas拖拽、移动绘制图片可操作移动，拖动

关于canvas 的基础知识就不多说了，可以进这个网址学习 http://www.w3school.com.cn/html5/html\_5\_canvas.asp 对

￡神魔★判官ぃ/ 2022年06月02日 11:50/ 0 赞/ 270 阅读

相关 HTML页面元素拖动

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

阳光穿透心脏的1/2处/ 2022年05月23日 09:24/ 0 赞/ 204 阅读

相关跨浏览器拖动HTML元素

一代码 HTML代码： <!DOCTYPE html> <html> <head> <meta name="author" conten

矫情吗；*/ 2022年05月12日 00:44/ 0 赞/ 216 阅读

相关 html js设置div可拖动效果

第一种：先看代码，可直接复制使用。这部分是我找了个例子，看了一遍，自己写的。但是也有一些问题。问题：js设置div可拖动效果当我在实际项目中使用时，div里有关闭d

灰太狼/ 2022年03月17日 12:52/ 0 赞/ 632 阅读

相关 JavaScript实现拖动滑块拼图验证（html5、canvas）

引言：滑块拖动验证现在很多地方都用到，周末就琢磨着写了一个，放上来，看看有没有人用得上！效果： ![20210315104557920.gif][]

川长思鸟来/ 2021年07月24日 13:07/ 0 赞/ 597 阅读