图片的拖拽释放

最新推荐文章于 2023-06-09 00:26:03 发布

少年莫忧

最新推荐文章于 2023-06-09 00:26:03 发布

阅读量84

点赞数

文章标签： java servlet javascript

本文链接：https://blog.csdn.net/shaonianmoyou/article/details/125876047

版权

行内属性

ondragstart:该事件表示拖放开始

ondragover:该事件表示拖放结束

ondrag:该事件表示拖放过程

过程和结束

    <div id="result" ondragover="allowDrag(event)" ondrop="drop(event) "></div>

开始

<!--draggable:值为true时表示元素可拖动，默认为false,表示不能拖动-->
    <img id="result1" src="img/flower.jpg" alt="" draggable="true" ondragstart="drag(event)">

js内容

用于拖放的函数
function drag() {}

拖动已开始

      function drag(ev) {

            ev.dataTransfer.setData("Text", ev.target.id);

        }

拖动过程

//拖动过程
        function drop(ev) {
            //允许其他元素拖放到此处
            ev.preventDefault();
            //获取要拖放元素的id
            var id = ev.dataTransfer.getData("Text");
            //将一个标签添加到另外一个标签中，可以使用appendChild();
            ev.target.appendChild(document.getElementById(id));
        }

拖动结束

   function allowDrag(ev) {

            // 允许其他元素拖放到此处

            ev.preventDefault();

        }

整体效果

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            width: 200px;
            height: 260px;
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <p>请将下面图片拖入到框中</p>
    <!--ondragstart:该事件表示拖放开始
     ondragover:该事件表示拖放结束
	 ondrag:该事件表示拖放过程-->
    
    <div id="result" ondragover="allowDrag(event)" ondrop="drop(event) "></div>
    <!--draggable:值为true时表示元素可拖动，默认为false,表示不能拖动-->
    <img id="result1" src="img/flower.jpg" alt="" draggable="true" ondragstart="drag(event)">



    <script>
        //用于拖放的函数
        //function drag() {}c
        //拖动已开始
        function drag(ev) {
            ev.dataTransfer.setData("Text", ev.target.id);
        }
        //拖动过程
        function drop(ev) {
            //允许其他元素拖放到此处
            ev.preventDefault();
            //获取要拖放元素的id
            var id = ev.dataTransfer.getData("Text");
            //将一个标签添加到另外一个标签中，可以使用appendChild();
            ev.target.appendChild(document.getElementById(id));
        }
        //拖动结束
        function allowDrag(ev) {
            // 允许其他元素拖放到此处
            ev.preventDefault();
        }
    </script>


</body>

</html>