javascript - 拖放保持可编辑内容的行为

Question

我正在用 Javascript 尝试拖放。到目前为止，它正在工作，但可拖动对象中的可编辑内容不再可用(因此不是它们通常的方式)

这是可放置对象的示例:

<div id="ziel_2" draggable="true" trvdroptarget="true">
    <div> some text<br>some text</div>
    <div contenteditable="true">some text</div>
</div>

如果我尝试使用 contenteditable div，则不应拖动整个对象，我想单击文本并编辑它，或者只是选择其中的一些文本并像平常一样拖动它

所以问题是:如果 ondragstart 中的 e.target.hasAttribute("contenteditable") 我怎样才能取消拖动事件？

编辑:这是迄今为止的幕后代码:

function lieferungen_draggable_add_dragstart(obj)
{
    obj.addEventListener('dragstart', function (e) {
      if(e.target.hasAttribute("contenteditable")) { /* make something stop this thing */ }
      e.dataTransfer.effectAllowed = 'move';
      e.dataTransfer.setData('Text', this.getAttribute('id'));
        return false;
    });
    return obj;
}

编辑2:

contenteditableDiv.addEventListener('mousedown', function() { this.parentNode.setAttribute("draggable", false); });
contenteditableDiv.addEventListener('mouseup', function() { this.parentNode.setAttribute("draggable", true); });

这对我来说是基于 https://stackoverflow.com/a/9339176/4232410 的想法。

感谢您的帮助!

Answer 1

检查元素和任何父元素的 contentEditable 状态(有关属性的信息，请参阅 the docs)

for (var el = e.target; el && el !== el.parentNode; el = el.parentNode) {
   if (el.contentEditable === "true") {
      return false;
   }
}
// Continue processing here