HTML5--拖动02-dragstart、drag、dragenter、dragover、dragleave、drop、dragend属性

最新推荐文章于 2024-03-17 21:10:14 发布
最新推荐文章于 2024-03-17 21:10:14 发布
阅读量472 收藏 2
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/zjsy/p/4740785.html
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 200px;
            height: 80px;
        }
        #fir{background-color: blue; }
        #sec{background-color: black;}
        #thr{background-color: chartreuse;}
        #d_img{width: 200px;height: 80px;}
    </style>
    <script type="text/javascript">
        var cont=0;
        var in_moving=0;
        /**--01--*/
        function f_ondragstart(e){
            document.getElementById("sp_start").innerHTML= e.target.id+":被拖元素，开始被拖动";
            //被拖动，就将拖动的元素，存入（setData）dataTransfer里面：键值对
            e.dataTransfer.setData("who", e.target.id);
            //--04--设置拖放过程中允许的效果（ondragstart中设置）
            e.effectAllowed="all";
        }
        function f_ondrag(e){
            cont++;
            document.getElementById("sp_moving").innerHTML= e.target.id+":被拖元素，被拖动过程中:"+cont;
        }
        function f_ondragenter(e){
            document.getElementById("sp_in").innerHTML= "进入:"+e.target.id;
        }
        /**--02--*/
        function f_ondragover(e){
            //进入，就设置可以拖放进来（设置不执行默认：【默认的是不可以拖动进来】）
            e.preventDefault();
            //--05--设置具体效果
            e.dataTransfer.dropEffect="copy";
            document.getElementById("sp_in_moving").innerHTML="进入:"+ e.target.id+":"+in_moving;
        }
        function f_ondragleave(e){
            document.getElementById("sp_leave").innerHTML="离开:"+ e.target.id
        }
        /**--03--*/
        function f_ondrop(e){
//            document.getElementById("sp_on").innerHTML="到达目标:"+ e.target.id;/**/
            //设置不执行默认：【默认的是不可以拖动进来】
            e.preventDefault();
            var who= e.dataTransfer.getData("who");
            //添加子节点
            document.getElementById(e.target.id).appendChild(document.getElementById(who));

            document.getElementById("sp_on").innerHTML=who+":到达目标:"+ e.target.id;
        }
        function f_ondragend(e){
            document.getElementById("sp_end").innerHTML="结束拖放:"+ e.target.id;
        }
    </script>
</head>
<body>
<!--拖放：
    拖动的对象，需要设置draggable属性为true(draggable="true"),
    a元素需要href，img元素需要src。
    1、被拖对象：dragstart事件，被拖动的元素，开始拖放触发
    2、被拖对象：drag事件，被拖放的元素，拖放过程中
    3、经过对象：dragenter事件，拖放过程中鼠标经过的元素，被拖放的元素“开始”进入其它元素范围内（刚进入）
    4、经过对象：dragover事件，拖放过程中鼠标经过的元素，被拖放的元素正在本元素范围内移动(一直)
    5、经过对象：dragleave事件，拖放过程中鼠标经过的元素，被拖放的元素离开本元素范围
    6、目标地点：drop事件，拖放的目标元素，其他元素被拖放到本元素中
    7、被拖对象：dragend事件，拖放的对象元素，拖放操作结束
 -->
</body>
<div id="fir" οndragenter="f_ondragenter(event)" οndragοver="f_ondragover(event)" οndragleave="f_ondragleave(event)" οndrοp="f_ondrop(event)">
</div>

<div id="sec" οndragenter="f_ondragenter(event)" οndragοver="f_ondragover(event)" οndragleave="f_ondragleave(event)" οndrοp="f_ondrop(event)">
</div>

<div id="thr" οndragenter="f_ondragenter(event)" οndragοver="f_ondragover(event)" οndragleave="f_ondragleave(event)" οndrοp="f_ondrop(event)">
</div>

<br>

<img id="d_img" src="imgs/img.jpg" draggable="true" οndragstart="f_ondragstart(event)" οndrag="f_ondrag(event)" οndragend="f_ondragend(event)">

<br>
<span id="sp_start"></span>
<br>
<span id="sp_moving"></span>
<br>
<span id="sp_in"></span>
<br>
<span id="sp_in_moving"></span>
<br>
<span id="sp_leave"></span>
<br>
<span id="sp_on"></span>
<br>
<span id="sp_end"></span>
</html>

 

转载于:https://www.cnblogs.com/zjsy/p/4740785.html

weixin_30951743
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5-JQ-拖拽小 案例
07-20
它包括了`dragstart`、`drag`、`dragend`、`dragenter`、`dragleave`、`dragover`和`drop`等事件，这些事件帮助开发者捕获拖放过程中的各个阶段。 1. **拖动开始（dragstart）**：当用户开始拖动一个元素时触发。在...
angularjs-html5-drag-and-drop:AngularJS HTML5 拖放
06-24
`drop`指令处理目标区域的`dragenter`、`dragover`、`dragleave`和`drop`事件，以确保数据可以正确地从拖动源传递到目标区域。 **5. 性能优化与兼容性** 在实际应用中，我们需要注意性能优化，避免不必要的DOM操作...
一个简单的Vue2例子讲明白拖拽drag、移入dragover、放下drop的触发机制先后顺序
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
03-17 708
【代码】一个简单的Vue2例子讲明白拖拽drag、移入dragover、放下drop的触发机制先后顺序。
HTML
weixin_44748964的博客
07-25 276
1 HTML5中拖放 drag API 拖放的流程：选中 ---> 拖动 ---> 释放 选中 文本、图片和链接是默认可以拖放的，它们的draggable属性自动被设置成了true。 图片和链接 按住鼠标左键选中，就可以拖放。 文本 只有在被选中的情况下才能拖放 draggable属性：设置元素是否可拖动。语法： <element draggab...
拖拽过程中进入子元素会触发dragleave事件 - 解决办法
shaoduo的博客
09-05 2661
本文参考链接https://www.jianshu.com/p/f96b754032a1 与上篇文章作者同样的需求，鼠标拖动文件进入元素的时候，元素样式要做出相应的改变。 本以为是个简单的操作，分分钟搞定，结果写完发现拖拽的时候的改变一直闪动，触发的dragenter事件中总是夹着dragleave。 原因是，鼠标进入事件监听的子元素的时候，会先触发dragleave事件。 我用的 vue， 当鼠标进入父元素时，添加类名，在此类名下重写它的所有子元素样式，全部添加穿透属性（不懂穿透属性的小伙.
所谓dragenter和dragleave的“失效”问题
麻瓜哇哇哇的博客
04-04 4570
今天工作中，遇到了一个奇葩问题，就是有个需求，文件拖拽上传，不过需要文件拖拽到容器当中才显示拖拽上传的范围框，然后离开容器，范围框消失，于是乎，立马去查了mdn，看了下API，然后分分钟写了出来，校验的时候，奇葩的事出现了，在我dragenter的时候不断的触发dragleave,当时我就满脸的黑人问号，好在最终，老天眷顾我，哈哈，被我发现了其中的奥妙，下面，我就举个列子，贴代码，给大家介绍下，为...
Html新增属性之拖拽（drag）
qq_40137978的博客
03-09 2651
darg
drag-and-drop-html-javascript
05-24
5. `dragover`: 在元素正在被拖动到目标区域上方时持续触发，用于允许/禁止放置。 6. `drop`: 元素被放下（释放）时触发，此时可以进行数据处理和位置更新。 7. `dragend`: 拖放操作结束时触发，无论是否成功。 ...
js拖拽排序-可以拖拽的DIV.rar
05-25
2. **事件监听**：我们需要监听拖放过程中的几个关键事件，如`dragstart`、`dragenter`、`dragover`、`dragleave`、`drop`和`dragend`。这些事件在拖放过程中被触发，让我们有机会处理元素的位置变化。 ```...
HTML5应用开发技术-拖放概述.pptx
03-03
2. `drag`: 在拖动过程中持续触发，可用于更新拖动状态或提供视觉反馈。 3. `dragend`: 当用户释放鼠标或手指，结束拖动操作时触发。此事件通常用于清理工作，如取消临时设置的样式或清除数据。 除了拖动元素本身...
HTML5 拖放（Drag 和 Drop）html排序拖拽案例，vue仿照element穿梭框拖拽案例。
qq_54753561的博客
05-11 2575
HTML5 拖放（Drag 和 Drop）html排序拖拽案例，vue仿照element穿梭框拖拽案例。
HTML5 学习笔记（七）--- 元素拖放
weixin_45092437的博客
08-04 790
一、拖放事件 1、概念 ​ 在 HTML5 中增加了多个针对元素拖放的事件，使实现元素拖放变得更简单。拖放事件仅仅能实现拖放的动作，要想真正实现拖放后进行数据交互，还需要结合 dataTransfer 对象，才能真正实现拖放效果。 ​ **注意：**要实现元素拖放，首先要在目标元素上 设置 draggable = “true” ，否则无法实现拖放。 2、事件 **① dragStart：**在元素拖动开始时触发，事件对象是被拖动元素。 **② drag：**在元素拖动过程中触发，事件对象是被拖动元素。
前端提高篇(七十三)：Drag和Drop拖放操作：拖放事件与dataTransfer对象操作
安之ccy的博客
03-24 6565
拖放API基础 drag：被拖放元素 在拖拽的过程中触发 dragend 被拖放元素 拖拽完成时 dragenter 目标元素 拖放元素进入目标元素时 dragover 目标元素 拖放元素在目标元素上时 dragleave 目标元素 拖放元素在目标元素上离开 drop 目标元素 被拖放的元素在目标元素上同时鼠标放开触发的事件 注：需要阻止dragover的默认行为才会触发drop事件 被拖拽的元素上需要设置属性：draggable="true"，才能被拖拽 被拖拽的元素有三个事件，分别是：dragstar
用dragstart、drag、dragend、dragover、drop、dragleave实现针对表格列的顺序进行拖拽排序(附带实现选择某几列数据显示或隐藏)
最新发布
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
03-17 511
将数组指定索引位置的元素 移动到 目标索引位置，且不改变其他元素原本的顺序，注意这个不是对调元素位置，是移动某一个元素位置不影响其他元素顺（使用场景：拖拽改变数据的顺序，点击上下左右箭头移动元素顺序）-CSDN博客。【代码】将数组指定索引位置的元素 移动到 目标索引位置（使用场景：拖拽改变数据的顺序，点击上下左右箭头移动元素顺序）
HTML5实战与剖析之原生拖拽(二拖拽事件dragstart、drag和dragend)
梦龙小站
03-04 8657
通过拖拽事件，咱们就可以控制拖拽很多东西了。其中什么元素或者是哪里发生了拖拽事件是最关键的。有些事件是在被拖动的元素上触发，有些事件是在放置目标上触发的。拖动某元素时候，触发的事件有：dragstart事件、drag事件和dragend事件。
vue拖拽功能
weixin_43173924的博客
04-18 891
<div class='drag-div' id="drag" @drop='drop($event)' @dragover='allowDrop($event)' @dragleave="dragLeave($event)" @dragenter="dragEnter($event)"> <label class=...
html5拖放详解,HTML5拖拽/拖放(drag & drop)详解
weixin_35812582的博客
06-24 950
H5中拖拽属性：draggable： auto | true | false拖动事件：- dragstart 在元素开始被拖动时触发- dragend 在拖动操作完成时触发- drag 在元素被拖动时触发释放区事件：dragenter 被拖动元素进入到释放区所占据得屏幕空间时触发dragover 当被拖动元素在释放区内移动时触发dragleave 当被拖动元素没有放下就离开释放区时触发drop 当...
HTML5拖放
uncle_Huang的博客
07-16 282
HTML5拖放 拖放的步骤 draggable属性设置为true draggable = “true”; 2 编写与拖放有关的事件处理代码 事件/产生事件的元素 描述 dragstart /被拖放的元素 开始拖放元素 drag /被拖放的元素 拖放过程中 dragenter/拖放过程中鼠标经过的元素 被拖放的元素开始进入本元素的范围之内 dragover/拖放过程中...
html元素拖拽
05-27
要在HTML中实现元素拖拽，可以使用HTML5中提供的拖放API。以下是一个简单的示例： 首先，在HTML中创建一个可以拖动的元素，例如一个 div 元素： ```html <div id="dragElement" draggable="true">拖动我</div> ``` 然后，在JavaScript中为该元素添加拖放事件的监听器： ```javascript var dragElement = document.getElementById("dragElement"); // 拖动开始时触发 dragElement.addEventListener("dragstart", function(event) { // 存储被拖动元素的ID event.dataTransfer.setData("text/plain", event.target.id); }); // 拖动结束时触发 dragElement.addEventListener("dragend", function(event) { // 可以在这里添加拖动结束后的操作 }); ``` 接下来，在另一个可放置元素中添加拖放事件的监听器： ```javascript var dropZone = document.getElementById("dropZone"); // 当拖动元素进入可放置区域时触发 dropZone.addEventListener("dragenter", function(event) { event.preventDefault(); // 防止默认行为 dropZone.classList.add("dragover"); // 添加样式 }); // 当拖动元素在可放置区域中移动时触发 dropZone.addEventListener("dragover", function(event) { event.preventDefault(); // 防止默认行为 }); // 当拖动元素离开可放置区域时触发 dropZone.addEventListener("dragleave", function(event) { dropZone.classList.remove("dragover"); // 移除样式 }); // 当拖动元素在可放置区域中释放时触发 dropZone.addEventListener("drop", function(event) { event.preventDefault(); // 防止默认行为 dropZone.classList.remove("dragover"); // 移除样式 // 获取被拖动元素的ID var dragElementId = event.dataTransfer.getData("text/plain"); // 将被拖动元素添加到可放置区域中 var dragElement = document.getElementById(dragElementId); dropZone.appendChild(dragElement); }); ``` 在上面的代码中，dropZone 是一个可放置元素，可以将被拖动的元素添加到其中。在拖动开始时，我们使用 dataTransfer.setData() 方法将被拖动元素的 ID 存储在 dataTransfer 对象中。在拖放结束时，我们可以通过 dataTransfer.getData() 方法获取被拖动元素的 ID。 注意，为了使元素能够被拖动，需要设置 draggable 属性为 true。同时，在拖动事件的监听器中需要调用 event.preventDefault() 方法，防止浏览器默认行为的发生。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值