Question

我使用内联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");

当我发送测试电子邮件时会出现问题。

在测试电子邮件中，边框保持应用，即上面功能中使用的虚线。此外，如果任何链接是电子邮件内容的一部分，他们也不会呈现。

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

有人可以就此提出自己的看法吗？

Answer 1

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

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

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

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

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

对于＆＃39; dragover＆＃39;和 -

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

如果是＆＃39; dragLeave＆＃39;并且＆＃39; drop＆＃39;。

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

在突出显示元素

1 个答案: