zoukankan      html  css  js  c++  java
  • html5 拖拽事件

    拖拽包含了两个大的操作,拖拽以及释放

    拖拽:drag

    释放:drop

    参考w3c的拖拽事件,了解一下拖拽事件的所有不同部分,这是按照拖拽的过程进行的解释

    1.把元素设置为可拖拽

      设置元素的属性draggable 为true

    2.拖拽什么

      ondragstart和setData 规定当元素拖拽时进行的操作

    3.被拖拽的元素放到哪里

      ondragover 规定在何处放置被拖拽的元素    

      默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。

      这要通过调用 ondragover 事件的 event.preventDefault() 方法:

    event.preventDefault()

     4.进行放置

      当放置被拖数据时,会发生 drop 事件。

      之后看 冯晓东的博客,他把这些方法按照源对象和目标对象的维度又进行了一下区分

      被拖动的源对象可以触发的事件:

      (1)ondragstart:源对象开始被拖动

      (2)ondrag:源对象被拖动过程中(鼠标可能在移动也可能未移动)

      (3)ondragend:源对象被拖动结束

      拖动源对象可以进入到上方的目标对象可以触发的事件:

      (1)ondragenter:目标对象被源对象拖动着进入

      (2)ondragover:目标对象被源对象拖动着悬停在上方

      (3)ondragleave:源对象拖动着离开了目标对象

      (4)ondrop:源对象拖动着在目标对象上方释放/松手

                                 ·········以上是对事件的简单介绍,,具体实现demo见下一随笔

  • 相关阅读:
    .NET 统一用户管理 -- 统一鉴权
    .NET 统一用户管理 -- 单点登录
    基于.net 职责链来实现 插件模式
    电商开放平台设计
    docker搭建一个渗透测试环境 bwapp为例
    dcoker运行msf
    关于构造靶场
    判断网站是不是真实ip
    H3C设备配置ARP攻击防御
    Java代码审计 HTTP头操纵 response.addHeader()
  • 原文地址:https://www.cnblogs.com/xy-milu/p/9379137.html
Copyright © 2011-2022 走看看