zoukankan      html  css  js  c++  java
  • 如何改变拖动时鼠标悬浮样式

    H5提供了 拖放(Drag and Drop)事件,【 drag & drop 】API 中 DataTransfer 对象,来配置拖拽行为的鼠标效果

    DataTransfer对象具有effectAllowed 和 dropEffect两个属性。 effectAllowed 和 dropEffect 最主要的作用是,用于配置拖拽操作过程中鼠标指针的类型以便提示用户后续可执行怎样的操作;其次的作用是,控制 drop 事件的触发与否。下面我们来看看effectAllowed 和 dropEffect两个属性的介绍,看看他们是如何控制鼠标指针样式的
    effectAllowed:
    1.属性作用:用于设置被拖拽元素可执行的操作。

    2.取值范围:
    copy ,限定dropEffect的属性值为copy,否则会鼠标指针为禁止样式
    link ,限定dropEffect的属性值为link,否则会鼠标指针为禁止样式
    move ,限定dropEffect的属性值为move,否则会鼠标指针为禁止样式
    copyLink ,限定dropEffect的属性值为copy和link,否则会鼠标指针为禁止样式
    copyMove ,限定dropEffect的属性值为copy和move,否则会鼠标指针为禁止样式
    linkMove ,限定dropEffect的属性值为link和move,否则会鼠标指针为禁止样式
    all ,允许dropEffect的属性值为任意值
    none ,鼠标指针一直为禁止样式,不管dropEffect的属性值是什么
    uninitialized ,没有限定dropEffect属性的值,效果和 all 一样。
    3.注意:仅能在 dragstart 事件中设置该属性,其他事件中设置均无效。

    dropEffect属性
    1.属性作用:
    用于设置目标元素将执行的操作,若属性值属于 effectAllowed 范围内,则鼠标指针将显示对应的指针样式,否则则显示禁止的指针样式。

    2.取值范围:
    copy :被拖拽元素将被复制到目标元素内,若属于 effectAllowed 范围内时,则鼠标指针显示复制的样式,否则则显示禁止的指针样式。
    link :被拖拽元素将以超链接的形式打开资源,若属于 effectAllowed 范围内时,则鼠标指针显示超链接的样式,否则则显示禁止的指针样式。
    move :被拖拽元素将被移动到目标元素内,若属于 effectAllowed 范围内时,则鼠标指针显示移动的样式,否则则显示禁止的指针样式。
    none :被拖拽元素不能在目标元素上作任何操作,一直显示禁止的指针样式。除了文本框外其他元素的默认值均为none

    3.注意:
    1)仅能在 dragover 事件中设置该属性值,其他事件中设置均无效
    2)当显示禁止的指针样式时,将无法触发目标元素的 drop 事件。

  • 相关阅读:
    World file文件格式
    HTML5 基础
    Spring Framework---概况
    Tomcat(1)
    警言妙句
    嵌入式系统总是要用户对变量或寄存器进行位操作。给定一个整型变量a,写两段代码,第一个设置a的bit 3,第二个清除a 的bit 3。在以上两个操作中,要保持其它位不变。
    关键字volatile有什么含意?并给出三个不同的例子。
    关键字const有什么含意?
    关于指针数组、数组指针、指针函数、函数指针等的问题
    实现两个int变量的值的交换,要求不使用临时变量。
  • 原文地址:https://www.cnblogs.com/liujinyu/p/11646753.html
Copyright © 2011-2022 走看看