对页面某个节点的拖曳（原生js和vue项目）

最新推荐文章于 2023-05-08 08:47:54 发布

oQingHeYiKan12

最新推荐文章于 2023-05-08 08:47:54 发布

阅读量906

点赞数

文章标签： draggable vue

本文链接：https://blog.csdn.net/oQingHeYiKan12/article/details/84746680

版权

HTML5中的draggable

draggable 属性规定元素是否可拖动（链接和图像默认是可拖动的。）

/// true:规定元素是可拖动的,false:规定元素是不可拖动的,auto:使用浏览器的默认特性。
<element draggable="true|false|auto">

在拖放的过程中会触发以下事件：

在拖动目标上触发事件 (源元素):
ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发

释放目标时触发的事件:

ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>ondrag相关事件</title>
<style>
.droptarget {
   
    float: left; 
    width: 100px; 
    height: 35px;
    margin: 15px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}
</style>
</head>
<body>                                                                                                                                                                        <p>在两个矩形框中来回拖动 p 元素:</p>
<div class="droptarget">
	<p draggable="true" id="dragtarget">拖动!!!</p>
</div>
<div class="droptarget"></div>
<p style="clear:both;"><strong>注意：</strong>Internet Explorer 8 及更早 IE 版本或 Safari 5.1 及更早版本的浏览器不支持 drag 事件。</p>
<p id="demo"></p>
<script>
///* 拖动时触发*/
document.addEventListener("dragstart", function(event) {
   
    //dataTransfer.setData()方法设置数据类型和拖动的数据
    event.dataTransfer.setData("Text"

最低0.47元/天解锁文章

oQingHeYiKan12

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
对页面某个节点的拖曳（原生js和vue项目）

HTML5中的draggabledraggable 属性规定元素是否可拖动（链接和图像默认是可拖动的。）/// true:规定元素是可拖动的,false:规定元素是不可拖动的,auto:使用浏览器的默认特性。&amp;amp;lt;element draggable=&amp;quot;true|false|auto&amp;quot;&amp;amp;gt;在拖放的过程中会触发以下事件：在拖动目标上触发事件 (源元素):ondragstart -...
复制链接

扫一扫