HTML5 的拖放学习笔记

最新推荐文章于 2022-07-21 16:33:45 发布

hjwzyy

最新推荐文章于 2022-07-21 16:33:45 发布

阅读量533

点赞数

分类专栏： HTML5 文章标签： HTNK5 标签的拖放

本文链接：https://blog.csdn.net/FTDD_HW/article/details/42046537

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、基本的元素都可以实现拖动。但是视频如果加了controls 可控制的视频就不可以拖动了;

2、在几个DIV中移动，只需要把这几个DIV都设置为可以放置的属性即可。div也可以被放进另一个DIV中。且被放进的DIV里面也还可以被拖进元素到里面。
3、body里面也可以放拖动的函数，

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">

<title>Document</title>
     <style type="text/css">
          #div1{border:5px solid red;width:350px;height:200px}
                    #div2{border:5px solid red;width:450px;height:300px}

          #div3{border:5px solid red;width:550px;height:400px}

          #div4{border:5px solid red;width:600px;height:350px}

     </style>
<script type="text/javascript">
function allowDrop(eve)
{
eve.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 οndrοp="drop(event)" οndragοver="allowDrop(event)">
     <div id="div1" draggable="true" οndragstart="drag(event)" >1
     </div>
     </br>

<video id="drag1" src="1.mp4" autoplay="autoplay" draggable="true" οndragstart="drag(event)">
我是FDTT_HW，我在听音乐！
</video>
     <div id="div2" οndrοp="drop(event)" οndragοver="allowDrop(event)" >2
     </div>
     <br />
          <div id="div3" οndrοp="drop(event)" οndragοver="allowDrop(event)" >3
     </div>
     <br />
          <div id="div4" οndrοp="drop(event)" οndragοver="allowDrop(event)">4
     </div>
</body>
</html>

hjwzyy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 的拖放学习笔记

1、基本的元素都可以实现拖动。但是视频如果加了controls 可控制的视频就不可以拖动了;2、在几个DIV中移动，只需要把这几个DIV都设置为可以放置的属性即可。div也可以被放进另一个DIV中。且被放进的DIV里面也还可以被拖进元素到里面。3、body里面也可以放拖动的函数， Document
复制链接

扫一扫