Javascript 在dragover上更改高亮显示元素的边框

我在应用程序中使用内联CkEditor 4.6版创建电子邮件

有多个内容块，用户可以在其中输入内容

内容块上应用了默认的2px虚线边框，以相互区分

如果将图像拖到内容块上，我需要用边框高亮显示该内容块，以便用户知道将图像拖到哪个列中。离开拖动时，边界应恢复到原来的状态，即默认值。此外，当我将图像放入目标内时，边框应恢复为默认值

我可以使用下面的代码实现这一点-

function changeBorderColor(parentClass) {
$(".cke_editable").parents(parentClass).each(function () {
      $(this).on("dragover", function () {
          $(this).css("border", "2px solid #00ADE6");
      });
      $(this).on("dragleave", function () {
          $(this).css("border", "2px dashed #c0c0c0");
      });
      $(this).on("drop", function () {
          $(this).css("border", "2px dashed #c0c0c0");
      });
  });
}

changeBorderColor(".threeRowLayout");

当我发送测试电子邮件时，问题就出现了

在测试电子邮件中，边框仍然适用，即上面函数中使用的虚线边框。此外，如果任何链接是电子邮件内容的一部分，它们也不会呈现

这不是应用程序的默认行为。只有在编写上述代码时，问题才会出现

---

有人能提供他们对此的想法吗

好吧，回答我自己的问题，问题在于代码行-

$(this).css(--------);

每当我发送一封测试电子邮件时，上述代码行就会应用边界。因此，我从未达到我想要的结果

为了解决这个问题，我修改了上面的行以应用一个类-

$(this).addClass(----)  

在“dragover”和-

$(this).removeClass(----)

如果出现“dragLeave”和“drop”

现在，每当我在内容块上拖动一个图像时，类就会被添加，而在离开或删除时，类就会被删除，因此也不会出现在测试电子邮件中