Question

我们有以下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的第一个li，而focusNode是p＃par3。这意味着在设置拖动内容时，不包括ul＃list1，并且错误地包含了p＃par3。

有没有办法，使用选择API，来实现我们想要的目标？

HTML选择API - 将<ul>元素添加到范围

0 个答案: