HTML5教程之-文件拖拽功能实现

最新推荐文章于 2022-07-19 17:20:48 发布

前端老码农

最新推荐文章于 2022-07-19 17:20:48 发布

阅读量810

点赞数

分类专栏：前端文章标签： Html5

原文链接：https://www.mk2048.com/blog/blog.php?id=j0ibihkab&title=HTML5%E6%95%99%E7%A8%8B%E4%B9%8B-%E6%96%87%E4%BB%B6%E6%8B%96%E6%8B%BD%E5%8A%9F%E8%83%BD%E5%AE%9E%E7%8E%B0

版权

前端专栏收录该内容

2065 篇文章 12 订阅

订阅专栏

现在打开优酷的网站我们再观看视频时如果拖动滚动条，页面会自动出现一个小的播放窗口，而这个播放窗口是可以说随便拖拽的。这种对图片或者链接的拖拽效果是怎么实现的？其实用 HTML5就很容易实现了，因为HTML5中有个

html5中默认对图片、链接可以拖放，其它元素需要设置draggable="true"才能拖放，事不宜迟，老夫马上去试试。

 
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>
   
</head>
<body>
<div id="dragme" draggable="true" style=" width: 200px; border: 1px solid gray;">请拖放</div>
<div id="text" style=" width: 200px; height: 200px; border: 1px solid gray;"></div>
<script type="text/javascript">
   document.ondragover = function (e) {
       e.preventDefault();
   };
   document.ondrop = function (e) {
       e.preventDefault();
   };

   var source = document.getElementById('dragme');
   var dest = document.getElementById('text');
   source.addEventListener('dragstart', function (e) {
       var dt = e.dataTransfer;
       dt.setData('text/plain', '您好'   new Date());
   }, false);

   dest.addEventListener('dragend', function (e) {
       e.preventDefault();
   }, false);

   dest.addEventListener('drop', function (e) {
       var dt = e.dataTransfer;
       var text = dt.getData('text/plain');
       dest.innerHTML  = text;
       e.stopPropagation();
       e.preventDefault();
       return false;
   }, false);
   
   </script>
</body>
</html> 
  