拖动父级，但在子级上选择文本？答案

【问题标题】：Drag parent, but select text on child?拖动父级，但在子级上选择文本？
【发布时间】：2014-04-12 01:21:19
【问题描述】：

我希望父 div 是可拖动的，但子跨度中的文本是可选择的：

<aside draggable="true" id="dragme">
    This is an aside, drag me. <span id="copyme" draggable="false">But copy me!</span>
</aside>

已经有一个类似的问题here，但是那里使用了jQuery。在不使用 jQuery 中，只使用 html5。

我试图阻止事件拖动，但除非我使用 preventDefault 否则什么都不会发生 - 然后我无法选择：

function dontdrag(ev) {
    ev.preventDefault();
    ev.stopPropagation();
    ev.stopImmadiatePropagation();
    return false;
}

这里有一个小提琴：http://jsfiddle.net/lborgman/8NvAT/6/

今天有人能找到解决方案吗？

更新：可能有解决方案，请参阅更新的小提琴：http://jsfiddle.net/lborgman/8NvAT/7/

它的行为有点奇怪，但它确实有效。谁能从这个新小提琴中找到更好的解决方案？

【问题讨论】：

试试这个：w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop 关键是可以在ondragstart事件中进行求值，停止拖动。很确定。可能有更好的方法。

标签： javascript css html draggable

【解决方案1】：

我通过使用专用的拖动手柄区域解决了同样类型的问题。因此，我没有将draggable="true" 添加到某个任意父级，而是在父级的一个角上放置了一个绝对定位的拖动手柄正方形。当您想要隐藏可拖动的实现（或只是让它看起来更好）时，这可能不是最佳解决方案，但它确实使拖动事件更容易。

【讨论】：

【解决方案2】：

您可以像这样向“copyme”元素添加事件侦听器：

cm.addEventListener("mouseover", function() {
    dm.setAttribute("draggable", "false");
});
cm.addEventListener("mouseout", function() {
    var selObj = window.getSelection();
    if (selObj) {
        var selRange = selObj.getRangeAt(0);
        var ancestor = selRange.commonAncestorContainer;
        if (ancestor.parentNode === cm) {
            selObj.removeAllRanges();
        }
    }
    dm.setAttribute("draggable", "true");
});

有关完整解决方案，请参阅此处的小提琴：http://jsfiddle.net/lborgman/8NvAT/12/

我认为这是（原则上）你目前能做的最好的事情。

【讨论】：