Question

我希望父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/

它表现得有些奇怪，但它确实有效。任何人都可以通过这个新的小提琴做出更好的解决方案吗？

Answer 1

您可以将事件监听器添加到＆＃34; copyme＆＃34;像这样的元素：

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/

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

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

1 个答案: