HTML5的图像拖放

最新推荐文章于 2022-12-23 11:35:38 发布

Fine9548

最新推荐文章于 2022-12-23 11:35:38 发布

阅读量250

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/Fine9548/article/details/106627014

版权

注意
对象元素的draggable属性设置为true，还需要注意的使a元素和img元素必须指定href。
编写和拖放有关的事件处理代码
，，，，
设置拖放时的视觉效果
llll、
实例代码

<!DOCTYPE html>
<html lang="en">
<header >
    <meta charset="UTF-8">
    <title>拖放</title>
    <script>
        function allowDrop(ev)
        {
            ev.preventDefault();
            ev.dataTransfer.dropEffect = 'link'
        }

        function drag(ev)
        {
            ev.effeAllowed = 'all';
            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>
    <style>
        #tuo{
            background: #e54d26;
            width: 540px;
            height: 320px;
        }
        #cun{
            width: 540px;
            height: 320px;
            border: 2px solid #D2D2D2;
            box-shadow: 1px 4px 8px #646464;
        }
    </style>
</header>
<body>
<div  id="cun" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
<br/>
<img src="李庚希.jpg" id="tuo" draggable="true" οndragstart="drag(event)"  width="500"  / >
</body>
</html>

Fine9548

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5的图像拖放

注意对象元素的draggable属性设置为true，还需要注意的使a元素和img元素必须指定href。编写和拖放有关的事件处理代码设置拖放时的视觉效果实例代码<!DOCTYPE html><html lang="en"><header > <meta charset="UTF-8"> <title>拖放</title> <script> function allowD
复制链接

扫一扫