ondragstart -拖放

最新推荐文章于 2023-05-30 16:01:31 发布

Ω一Ω一Ω

最新推荐文章于 2023-05-30 16:01:31 发布

阅读量909

点赞数 1

分类专栏：笔记文章标签： java 前端服务器

本文链接：https://blog.csdn.net/m0_63498249/article/details/125902791

版权

笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

draggable 属性规定元素是否可拖动。该属性有3个值：

true：规定元素可以拖动
fase：规定元素不可拖动
auto：使用浏览器的默认特性

设置元素为可拖放
首先，为了使元素可拖动，draggable:值为true时表示元素可拖动，默认为false，表示不能拖动

<img draggable="true">

在拖动目标上触发事件 (源元素):

ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发

拖动——ondragstart
ondragstart属性调用了一个函数,drag(ev)，它规定了被拖动的数据。

Text是一个DOMString，表示要添加到drag object的拖动数据的类型。值是可拖动元素的id ('drag1")。

// 拖动开始

function drag(ev){

// DataTransfer 数据传输

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

}

        放到何处——ondragoverl
        ondragover事件规定在何处放置被拖动的数据。
        默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式.
        这要通过调用ondragover事件的event.preventDefault()方法:

// 拖动结束

function allowDrag(ev){

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

ev.preventDefault();

}

应用效果：

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

<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>元素拖放</title>
    <style type="text/css">
        #result {
            width: 200px;
            height: 250px;
            border: 2px solid red;
            padding: 10px;
        }
    </style>
</head>
<!-- set设置
get获取 -->
<body>
    <p>请将下面的图片拖入到框中</p>
     <!-- 拖放的位置 -->
    <div id="result" ondragover="allowDrag(event)" ondrop="drop(event)">
    </div>
    <img id="a" src="img/flower.jpg" alt="" draggable="true" ondragstart="drag(event)">
    <script type="text/javascript">
        // 用于拖动的函数
        // 拖动开始
        function drag(ev){
            // DataTransfer 数据传输
            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>