拖放保持可编辑内容的行为答案

【问题标题】：Drag&Drop keep behavior of editable content拖放保持可编辑内容的行为
【发布时间】：2016-01-04 08:49:06
【问题描述】：

我正在 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，则不应拖动整个对象，我想单击文本并对其进行编辑，或者只是选择其中的一些文本并像往常一样拖动它

所以问题是：如果 e.target.hasAttribute("contenteditable") 在 ondragstart 中，我如何取消拖动事件？

编辑：这是到目前为止的幕后代码：

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;
}

EDIT2：

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

根据https://stackoverflow.com/a/9339176/4232410 的想法，这对我有用

感谢您的帮助！

【问题讨论】：

您可以为 contenteditable 部分提供一个 id，然后在绑定可拖动事件时，排除该/那些 ID - 需要真正查看您的代码
添加了代码，但我不知道如何排除可拖动元素中的特定元素
刚刚发现stackoverflow.com/questions/6848140/… 似乎是一个类似的问题，但也没有结果；(
查看编辑，它有效；）

标签： javascript html

【解决方案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

【讨论】：

您也可以检查“false”并提前中断 - 但这给出了基本思路 ;-)
刚刚发现，那个e.target总是返回外层的div，而不是我用鼠标点击的那个对象……怎么找出来？
但即使我在 dragstart 的第一行返回 false，也没有任何变化，对象仍然是可拖动的；(
contenteditableDiv.addEventListener('mousedown', function() { if (e.stopPropagation) e.stopPropagation(); });将阻止拖动，但也会与对象交互，例如选择文本或设置光标；（
"this" 是点击的元素，"e.target" 是带有监听器的元素 - 我很遗憾忘记了这一点，但很高兴你让它工作了 :-)

【解决方案2】：

试试这个：

if(e.target.hasAttribute("contenteditable")) { return false; }

基本上就是说，如果目标有属性，那就出去，不要做任何其他事情：contenteditable

【讨论】：