Question

我正在尝试使用Javascript中的Drag＆amp; Drop。到目前为止它正在工作，但可拖动对象中的可编辑内容不再可用（因此通常不是这样）

这是一个可删除对象的示例：

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

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

的想法，这对我有用

感谢您的帮助！

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

Answer 2

试试这个：

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

基本上，如果目标具有属性：contenteditable

，那说出来并且别做其他事情

Drag＆amp; Drop保留可编辑内容的行为

2 个答案: