zoukankan      html  css  js  c++  java
  • 拖拽操作

    一、基本信息

    描述:被拖拽的元素依然在原地,拖拽的相当于拖拽元素的影子

    方法:

    1、在标签里写draggable="true"

    <li draggable="true"></li>

    2、被拖拽的元素

    (1)拖拽前触发

    写法:元素.ondragstart = function(){ }

    描述:点击被拖拽元素且开始拖拽的一瞬间触发的事件

    (2)拖拽结束触发

    写法:元素.ondragend= function(){ }

    描述:当拖拽后鼠标抬起的时候表示拖拽结束,触发事件

    (3)拖拽开始与结束之间连续触发

    写法:元素.ondrag= function(){ }

    描述:即时拖拽的时候停在原地不动也会一直触发

    3、目标元素

    (1)拖拽到目标点的时候触发

    写法:元素.ondragenter= function(){ }

    描述:当被拖拽的元素进入目标位置的时候触发

    (2)离开目标点的时候触发

    写法:元素.ondragleave= function(){ }

    描述:当被拖拽的元素离开目标位置的时候触发

    (3)拖拽到目标点到离开之间触发

    写法:元素.ondragover= function(){ }

    描述:移动到目标点后就会一直触发,即使停在目标点内不动,移出目标点的时候停止触发

    4、被拖拽元素在目标元素上鼠标释放触发

    写法:元素.ondrop= function(){ }

    触发条件:要想触发drop事件,就必须在dragover当中阻止默认事件ev.preventDefault();

  • 相关阅读:
    Assets Pipeline
    how to execute-shell-commands by ruby
    DFS---迷宫问题
    病毒感染监测
    RE数组开多大?
    C++如何输入含空格的字符串
    后缀算术表达式
    中缀表达式转化为后缀表达式
    基于两端操作的循环队列的实现---怎么判断队满??
    循环队列--忘记分配空间和如何用tag判断队空队满
  • 原文地址:https://www.cnblogs.com/SongHuiJuan/p/7454208.html
Copyright © 2011-2022 走看看