html5拖放

最新推荐文章于 2024-04-20 11:06:33 发布

lkk1344

最新推荐文章于 2024-04-20 11:06:33 发布

阅读量360

点赞数 1

分类专栏： html/css/js/jquery 文章标签： html5

本文链接：https://blog.csdn.net/lkk1344/article/details/49913843

版权

html/css/js/jquery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一：拖放（Drag 和 drop）
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

二：案例一

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />  
</head>  
<style type="text/css">  
    #div1 {width:488px;height:400px;padding:10px;border:1px solid #aaaaaa;}  
</style>  
<script type="text/javascript">  
    /*ondragover 事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。  
    如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的   
    event.preventDefault() 方法*/  
    function allowDrop(ev)  
    {  
        //该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。  
        ev.preventDefault();  
    }  
    //它规定了被拖动的数据。dataTransfer.setData() 方法设置被拖数据的数据类型和值  
    function drag(ev)  
    {  
        ev.dataTransfer.setData("Text",ev.target.id);  
    }  
    //当放置被拖数据时，会发生 drop 事件。  
    function drop(ev)  
    {  
        ev.preventDefault();  
        var data=ev.dataTransfer.getData("Text");  
        ev.target.appendChild(document.getElementById(data));  
    }  
</script>  
<body>  
<p>请把图片拖放到矩形中：</p>  
<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>  
<br />  
<!--描述：使元素可拖动，把 draggable 属性设置为 true-->  
<img id="drag1" src="img/1.jpg" draggable="true" οndragstart="drag(event)" />  
</body>  
</html>

代码解释：
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目标元素）中
三：案例二来回拖动图片

<span style="font-size:18px;"><!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title></title>  
    <style type="text/css">  
    #div1, #div2  
    {float:left; width:200px; height:100px; margin:10px;padding:10px;border:1px solid #aaaaaa;}  
    </style>  
    <script type="text/javascript">  
    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" οndrοp="drop(event)" οndragοver="allowDrop(event)">  
  <img src="img/1.jpg" draggable="true" οndragstart="drag(event)" id="drag1" />  
</div>  
<div id="div2" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>  
</body>  
</html>  </span>

建议使用谷歌浏览器观看效果！

lkk1344

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5拖放

一：拖放（Drag 和 drop）拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。二：案例一 #div1 {width:488px;height:400px;padding:10px;border:1px solid #aaaaaa;} /*
复制链接

扫一扫

专栏目录