说说 HTML 中的dropEffect 和 effectAllowed

最新推荐文章于 2024-07-17 15:24:17 发布

MapVillage

最新推荐文章于 2024-07-17 15:24:17 发布

阅读量1w

点赞数 3

本文链接：https://blog.csdn.net/gggg5643/article/details/52135824

版权

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

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

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

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

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

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

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

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

目标元素中

一下是示例代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        function init() {
            var source = document.getElementById("dragme");
            var dest = document.getElementById("text");
            source.addEventListener("dragstart", function (e) {
                var dt = e.dataTransfer;
                dt.effectAllowed = 'copy';
                dt.setData("text/plain", "你好");
            }, false);
            dest.addEventListener("dragend", function (e) {
                e.preventDefault();
            }, false);
            dest.addEventListener("drop", function (e) {
                var dt = e.dataTransfer;
                var text = dt.getData("text/plain");
                dt.dropEffect = 'copy';
                dest.textContent += text;
                e.preventDefault();
                e.stopPropagation;
            }, false);
        }
        document.ondragover = function (e) {
            e.preventDefault();
        };
        document.ondrop = function (e) {
            e.preventDefault();
        };
    </script>
</head>
<body οnlοad="init()">
    <div id="dragme" draggable="true" style ="width:200px;border:1px solid;border-color:gray">请拖放</div>
    <div id="text" style="width:200px;height:200px;border:1px solid;border-color:gray"></div>
</body>
</html>