Javascript dragenter和dragleave上的颜色变化不起作用jquery

当拖动并输入

时，边框和文本的颜色会完全从灰色变为黑色，而

则会变回灰色

CSS:

.upload cont{
光标：指针；
左边距：130像素；
显示：内联块；
边框：2个虚线#a8a8a8；
最大宽度：220px；
最大高度：180像素；
最小宽度：220px；
最小高度：180px；
位置：相对位置；
边界半径：3px；
}
.添加文本{
显示：块；
字体大小：10px；
字体大小：粗体；
颜色：#999；
单词包装：打断单词；
文本对齐：居中；
宽度：100px；
最高：37%；
左：25%；
位置：绝对位置；
}
.添加文本：悬停{颜色：黑色；}

HTML:

当输入

检查此JSFIDLE:

---

提前感谢

使用

dragover

而不是

dragenter

，因为

dragleave

在输入子元素时激发

$(".upload-cont,.add-text").on('dragover', function (e) {
    $(".upload-cont").css({
        "border": "2px dashed black"
    });
    $(".add-text").css({
        "color": "black"
    });
});
$(".upload-cont").on('dragleave', function (e) {
    $(".upload-cont").css("border", "2px dashed #a8a8a8");
    $(".add-text").css({
        "color": "#a8a8a8"
    });
});

---

拖动时，

dragover

事件会不断触发，因此我不喜欢这种解决方案。我写了一个名为的小程序库，它为我提供了更好的

enter

和

leave

事件。

显然，这个问题比我想象的要频繁，因为我发现了至少5个与同一主题相关的问题（我将回答所有与这个问题相关的问题）

不同于“鼠标切换”，事件“DROGOVER”和“DRAGELVER”不考虑子元素作为一个整体，因此每当鼠标通过任何一个孩子时，“DRAGELVER”将被触发。

考虑到文件的上传，我创建了一个小部件，它允许：

使用$\u文件拖放桌面文件

使用$\u POST和cURL拖放到浏览器图像/元素或url

使用按钮使用$\文件附加设备文件

使用输入，使用$\u POST和cURL写入/粘贴url图像/元素

问题是：由于所有内容，包括表单输入和图像，都在DIVs子级中，因此即使没有离开虚线，也会触发“dragleave”。由于方法3和4需要触发“onchange”事件，因此使用属性“pointer events:none”不是一种替代方法

解决方案是什么？一个重叠的DIV，当鼠标进入时覆盖所有放置容器，并且唯一一个包含子元素且带有“指针事件：无”的DIV

结构：

• div#放置容器：主div，保持所有组件在一起
• div#drop区域：“dragenter”侦听器和中间触发器#drop up
• div#drop pupp：与#drop area处于同一水平，“dragenter”、“dragleave”和“drop”侦听器

然后，当鼠标通过将一个元素拖动到#drop区域进入时，中间显示#drop pup up ahead，事件依次出现在这个div上，而不是最初的接收器上

下面是JS/jQuery代码。我冒昧地离开了PoC，所以不要浪费我失去的所有时间

jQuery（document）.on（'dragover'，'drop area'，函数（事件）{
event.preventDefault（）；
event.stopPropagation（）；
jQuery（'#drop popup'）.css（'display'，'block'）；
});
jQuery（document）.on（'dragover dragleave drop'，'#drop popup'，函数（事件）{
event.preventDefault（）；
event.stopPropagation（）；
console.log（事件类型）；
//布局和放置事件
如果（event.type=='dragover'）{
jQuery（'#drop popup'）.css（'display'，'block'）；
}
否则{
jQuery（'#drop popup'）.css（'display'，'none'）；
如果（event.type=='drop'）{
//做你想做的事
//对于文件：使用event.originalEvent.dataTransfer.files
//对于web拖动的元素：使用event.originalEvent.dataTransfer.getData（'Text'）和CURL来捕获
}
}
});
正文{
背景：#ffffff；
边际：0px；
字体系列：无衬线；
}
#投递容器{
保证金：100px 10%；/*仅用于在线测试*/
宽度：80%；/*仅用于JSFIDLE目的*/
显示：块；
浮动：左；
溢出：隐藏；
框大小：内容框；
位置：相对；/*需要使用绝对打开#下拉弹出窗口*/
边界半径：5px；
文本对齐：居中；
游标：默认值；
边框：2个虚线#000000；
}
#降落区{
显示：块；
浮动：左；
填充：10px；
宽度：100%；
}
#下拉弹出窗口{
显示：无；
框大小：内容框；
位置：绝对位置；
宽度：100%；
排名：0；
左：0；
背景：线性梯度（到底部，rgba（2452452451），rgba（2452452450）；
高度：512px；
填充：20px；
z指数：20；
}
#下拉弹出窗口>p{
指针事件：无；
}

拖放
放置区域内的子段落内容表示“在虚线区域放置文件或图像”

这是一个儿童一组
这是第二儿童组
这个DIV将覆盖主DIV dropover事件上的所有child，当前的p标签是唯一一个带有CSS“pointer events:none


$(document).ready(function () {
    $(".upload-cont,.add-text").on('dragenter', function (e) {
        $(".upload-cont").css({
            "border": "2px dashed black"
        });
        $(".add-text").css({
            "color": "black"
        });
    });
    $(".upload-cont").on('dragleave', function (e) {
        $(".upload-cont").css("border", "2px dashed #a8a8a8");
        $(".add-text").css({
            "color": "#a8a8a8"
        });
    });
});

$(".upload-cont,.add-text").on('dragover', function (e) {
    $(".upload-cont").css({
        "border": "2px dashed black"
    });
    $(".add-text").css({
        "color": "black"
    });
});
$(".upload-cont").on('dragleave', function (e) {
    $(".upload-cont").css("border", "2px dashed #a8a8a8");
    $(".add-text").css({
        "color": "#a8a8a8"
    });
});