HTML5拖动

叁歲伎倆 2022-08-23 09:58 224阅读 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 条评论，224人围观）

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

相关阅读

相关 HTML实现鼠标拖动元素排序

1. 简介拖放（Drag和 drop）是 HTML5 标准的组成部分，为了使元素可拖动，必须把 draggable 属性设置为 true，整个拖拽事件触发的顺序如

短命女/ 2023年10月07日 19:06/ 0 赞/ 91 阅读

相关 html5元素复制拖动

<!DOCTYPE HTML> <html> <head> <style type="text/css"> div1 { width:198px

我不是女神ヾ/ 2023年03月04日 13:30/ 0 赞/ 58 阅读

相关 HTML5拖动

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

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

相关 HTML&HTML5

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

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

相关 [html5]表格拖动

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

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

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

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

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

相关 HTML页面元素拖动

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

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

相关跨浏览器拖动HTML元素

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

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

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

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

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

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

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

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