Question

我基本上想要实现一个功能，以便在鼠标悬停在其上时显示HTML元素选择标记。为什么我需要这个是因为我试图在用户拖动其他元素时显示悬停目标元素的边界，以指示用户将其删除的位置。

我刚刚尝试了很多关于stackoverflow和google的搜索，但遗憾的是我没有找到任何类似的问题答案。

我实际上有一些初步的想法来实现这个，就是动态添加和删除css类到悬停目标元素，但是如何编写css类？我是否需要使用伪类来设置元素边界的样式，例如。：之前或之后？我想要的可能是一个带有自定义样式的闪烁插入符号或者用户指示放置位置的任何显而易见的内容。

另一个派生的问题是，实现这个视觉选择标记可能会污染原始的html。如果我不想污染html怎么办？如何实现这一点？使用影子dom？若然，如何影响整个文件？

这里粘贴一些我的代码片段：

    document.addEventListener("dragover", OnDragOver, false);
    document.addEventListener("dragleave", OnDragLeave, false);
    document.addEventListener("drop", OnDrop, false);

    var OnDragOver = function(ev) {
      ev.preventDefault();
      //to show the visual selection marker
    }

    var OnDragLeave = function(ev) {

    }

    var OnDrop = function(ev) {
      ev.preventDefault();
      var data = ev.dataTransfer.getData("Text");
      data = TranslateHtml(data);
      ev.target.insertAdjacentHTML("beforeEnd", data);
    }

Answer 1

您可以动态地将CSS类添加到要拖动的元素，使用:after内容显示指示放置位置的插入符号：

＆＃13;

document.addEventListener("dragstart", function(ev) {
  ev.dataTransfer.setData("Text", ev.target.innerHTML);
});

document.addEventListener("dragover", function(ev) {
  ev.preventDefault();
  ev.target.classList.add("dragover");
});

document.addEventListener("dragleave", function(ev) {
  ev.target.classList.remove("dragover");
});

document.addEventListener("drop", function(ev) {
  ev.preventDefault();
  ev.target.classList.remove("dragover");
  var data = ev.dataTransfer.getData("Text");
  ev.target.insertAdjacentHTML("beforeEnd", data);
});

＆＃13;

.dragover:after {
  content: "";  
  border: thin black dotted;
  animation: blink .75s infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

＆＃13;

<h1>Sample Document</h1>
<p>This is a paragraph</p>
<div draggable="true">Drag me!</div>

＆＃13;

请注意，除非您将var OnDrag...声明移到.addEventListener()来电之上，否则您的原始代码将无法正常工作。否则，在将它们添加为事件侦听器时，它们的值是未定义的。

如何在HTML / JS中创建悬停元素的可视选择标记？

1 个答案: