zoukankan      html  css  js  c++  java
  • html5 drag and drop

    html5 drag和drop事件

    先上效果图:

    代码:

    1. 代码里仅使用了dragstart、dragover、drop事件。另外还有dragenter、dragleave、drag、dragend事件。
    2. 还有比较特别的是增加了一个event.dataTransfer对象。下面会详细介绍一下。


    特别要注意:

    1. ondragover处要使用event.preventDefault(),不然不会触发ondrop事件!
    2. 被拖动元素的html里要设置draggable="true"。
    3. 在拖动过程中,mouseover是不会被触发的。

    dataTransfer对象

    1. effectAllowed、dropEffect:指定被拖拽元素和放置元素能接收什么操作;
    2. setData、getData、clearData:设置、获取、删除数据;
    3. addElement:添加某个元素跟随被拖拽元素;
    4. setDragImage:设置拖放过程中跟随鼠标的图片,默认为元素本身;

    [详细参数说明点击此处]


    -----------------------------------------
    (⊙0⊙)如果该博文有用,记得点个赞哦
    转载指明出处即可╰( ̄▽ ̄)╮
    欢迎讨论o(≧v≦)o~~
  • 相关阅读:
    <LinkedList> 61
    <LinkedList> (hard + 高)25
    <DP> (高频)322
    <BackTracking> (dfs hard) 291
    <Tree> (高频)236
    <Math> 29 365
    <String> 161 358
    <Array> 309 (高)334
    <Array> 54 (高频+hard )45
    <Design> 359 346
  • 原文地址:https://www.cnblogs.com/jiahuix/p/4586953.html
Copyright © 2011-2022 走看看