1

我们有以下 HTML 文档：

<html>

<head></head>

<body>
    <p id="par1">Paragraph1</p>
    <ul id="list1">
        <li>Item1.1</li>
        <li>Item1.2</li>
    </ul>
    <p id="par2">Paragraph2</p>
    <ul id="list2">
        <li>Item2.1</li>
        <li>Item2.2</li>
    </ul>
    <p id="par3">Paragraph3</p>

    <script>
        let list1 = document.getElementById('list1');
        let list2 = document.getElementById('list2');

        let range = document.createRange();
        range.setStartBefore(list1);
        range.setEndAfter(list2);

        document.getSelection().addRange(range);
        console.log(document.getSelection());
    </script>
</body>

</html>

也可作为Plunker 使用。

基本上，我们试图创建一个从 ul#list1 之前开始并在 ul#list2 之后结束的选择范围，其中两个列表都完全包含在内。使用此选择，我们将希望将此选择拖动到另一个放置区域。

从视觉上看，这似乎工作正常。但是，查看记录的文档选择，我们看到 anchorNode 是 ul#list1 的第 1 li，而 focusNode 是 p#par3。这意味着在设置拖动内容时，不包括ul#list1，而错误地包括了p#par3。

有没有办法使用选择 API 来完成我们想要的？

4

0 回答 0