При перемещении изменить границу выделенного элемента

Question

Я использую встроенный CkEditor версии 4.6 для создания электронной почты внутри моего приложения.

Существует несколько блоков контента, внутри которых пользователь может вводить контент.

К блокам контента по умолчанию нанесена пунктирная рамка размером 2 пикселя, чтобы различать друг друга.

Если изображение перетаскивается в блоки контента, мне нужно выделить этот блок контента с рамкой, чтобы пользователь знал, в какой столбец он помещает изображение. При выходе из перетаскивания граница должна вернуться к тому, что было по умолчанию. Также, когда я опускаю изображение внутри цели, граница должна вернуться к значению по умолчанию.

Я могу добиться этого, используя следующий код ниже -

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(----)  

в случае 'dragover' и -

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

в случае'dragLeave' и 'drop'.

Теперь, когда я перетаскиваю изображение поверх блока контента, класс добавляется, а при отпускании или отбрасывании класс удаляется, следовательно, также не отображается в тестовом электронном письме.