第33章 HTML5拖放

最新推荐文章于 2024-05-23 16:52:46 发布

iteye_17658

最新推荐文章于 2024-05-23 16:52:46 发布

阅读量84

点赞数

分类专栏：阅-H52

本文链接：https://blog.csdn.net/iteye_17658/article/details/82644663

版权

阅-H52 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

本文介绍了一个简单的HTML拖放功能实现案例。通过JavaScript定义了允许拖放、开始拖放及完成拖放三个事件处理函数，实现了图片从源位置拖拽到目标区域的功能。此示例可用于前端开发中交互式元素的设计。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        function allowDrop(ev)
        {
            //不执行默认处理（拒绝被拖放）
            ev.preventDefault();
            ev.dataTransfer.dropEffect = 'link'
        }

        function drag(ev)
        {
//         使用setData(数据类型，携带的数据)
//         方法将要拖放的数据存入dataTransfer对象
//            ev.clearData();
            ev.effeAllowed = 'all';
            ev.dataTransfer.setData("Text",ev.target.id);
        }

        function drop(ev)
        {
            //不执行默认处理（拒绝被拖放）
            ev.preventDefault();
            //使用getData()获取到数据，然后赋值给data
            var data=ev.dataTransfer.getData("Text");
            //使用appendChild方法把拖动的节点放到元素节点中成为他的子节点
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
    <style>
        #tuo{
            background: #e54d26;
            width: 540px;
            height: 320px;
        }
        #cun{
            width: 540px;
            height: 320px;
            border: 2px solid #D2D2D2;
            box-shadow: 1px 4px 8px #646464;
        }
    </style>
</head>
<body>
<div  id="cun" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
<br/>
<img src="images/html5.png" id="tuo" draggable="true" οndragstart="drag(event)"  width="500" height="280" / >
</body>
</html>

效果图：