H5拖拽常用属性effectAllowed和 dropEffect

最新推荐文章于 2024-04-20 11:06:33 发布

顾九七

最新推荐文章于 2024-04-20 11:06:33 发布

阅读量6.2k

点赞数 8

分类专栏：杂知识文章标签： javascript html5

本文链接：https://blog.csdn.net/qq_44681872/article/details/108237331

版权

杂知识专栏收录该内容

15 篇文章

订阅专栏

1.dropEffect 表示拖放操作的视觉效果

2.effectAllowed 用来指定当元素被拖放式所允许的视觉效果

两者的区别：从概念中理解，effectAllowed 比 dropEffect 多了 “允许” 这两个关键字，由此我们可以得知， efectAllowed 是用来限制dropEffect ，是不是有种类似父亲和儿子的的关系。

根据两者的概念，我们也就可以轻易理解两者的使用规则：

（1）如果effectAllowed属性是定为none,则不允许拖放元素。

（2）如果dropEffect 属性设定为none,则不允许被拖放到目标元素中。

（3）如果effectAllowed属性设定为all 或不设定，则dropEffect属性允许被设定为任何值。并且按指定的效果显示。

（4）如果effectAllowed属性设定为具体的效果（部位none、all），dropEffect属性也设定了具体视觉效果，则两个具体效果之必须完全相等，否则不允许将被拖放元素拖放到目标元素中

以上内容借用于MapVillage
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
上文链接: MapVillage

我对上文的理解如下：

effectAllowed是可以控制dropEffect的，在使用dropEffect时，要先使用effectAllowed,且其不可为none，否则不管dropeffect设置为什么，都不会生效
而若dropeffect设置为none，则不管怎样都不会触发drop
先介绍一下两个属性可取的值：
dropeffect可取值：none|copy|link|move
effectAllowed可取值：copy|move|link|copyLink|copyMove|linkMove|all|none|uninitialized

所学为：

1.dropEffect：获取当前选定的拖放操作类型或者设置的为一个新的类型，可以改变光标的显示样式，要跟effectAllowed搭配使用，否则不生效。值必须为none|copy|link|move

2.effectAllowed：设置本次拖拉中允许的效果，值为copy|move|link|copyLink|copyMove|linkMove|all|none|uninitialized,
只有ondragstart可以用来设置这个属性，其他事件中设置这个属性是无效的。

3.只要dropEffect属性和effectAllowed属性之中，有一个为none，就无法在目标节点上完成drop操作。

实践后的结果是：

当两者都不设置时，效果为拖拽元素进入目标元素后，光标效果为斜箭头+虚线长方形框，长方形框位于箭头的下方，很小
1.与所学不同，当只设置dropEffect为link,无effectAllowed时，也会生效，产生效果。
dropEffect为link   效果为在长方形框的右下方会出现一个白底的正方形框，其中有黑色箭头。
dropEffect为move   无变化
dropEffect为copy    正方形框中为一个加号
dropEffect为none    箭头整个变为黑框圆圈+经圆心的斜线    
2.当只设置effectAllowed,无dropEffect时，不会产生效果
3.dropEffect设置为none，不论effectAllowed设置为什么，效果都为箭头整个变为黑框圆圈+经圆心的斜线
4.dropEffect设置为link，不论effectAllowed设置为什么，效果都为在长方形框的右下方会出现一个白底的正方形框，其中有黑色箭头。
5.dropEffect设置为move，不论effectAllowed设置为什么，效果都无变化
6.dropEffect设置为copy，不论effectAllowed设置为什么，效果都为正方形框中为一个加号。

是我写的代码有问题吗？完全凸显不出effectAllowed存在的意义

<html lang="zh-CN">
<head>
    <title></title>
    <meta charset="UTF-8">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            display: flex;
            justify-content: space-between;
        }
        #target{
            width: 300px;
            height: 300px;
            background:url('垃圾桶图片') no-repeat center/300px 300px;
            border: 1px solid #ccc;
        }
        #drag{
            width: 200px;
            height: 200px;
            background-color: #bbbbbb;
        }
    </style>
</head>
<body>
    <!-- 编辑页面使左边为拖拽到的位置，右边为所要拖拽的元素 -->
    <div id="target"></div>//目标元素
    <div id="drag" draggable="true"></div>//拖拽元素
    <script>
        drag.ondragstart = function(e){
            this.style.background = 'red'
            //改变下面这个属性
            e.dataTransfer.effectAllowd = 'linkMove'
        }
        drag.ondrag = function(){
            console.log('我正在被移动')
        }
        drag.ondragend = function(){
            this.style.background = 'blue'
        }

        target.ondragenter = function(e){
            this.innerText = '请释放鼠标删除'
        }
        target.ondragover = function(e){
			//改变下面这个属性
            e.dataTransfer.dropEffect = 'copy'
            this.innerText = '不要随意乱窜'
            // 浏览器默认可以拖动一些东西，所以我们要阻止它,加在其他地方不行
            e.preventDefault()
        }
        target.ondragleave = function(){
            this.innerText = '在此处才可删除' 
        }
        target.ondrop = function(){
            document.body.removeChild(drag)
            this.innerText = '文件已删除'            
        }
    </script>
</body>
</html>