Javascript HTML选择API-添加<；ul>；元素范围_Javascript_Html_Dom_Selection Api

Javascript HTML选择API-添加<；ul>；元素范围

javascript html dom

Javascript HTML选择API-添加<；ul>；元素范围,javascript,html,dom,selection-api,Javascript,Html,Dom,Selection Api,我们有以下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">

我们有以下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>


第1段

项目1.1
项目1.2

第2段

项目2.1
项目2.2

第3段
让list1=document.getElementById（'list1'）；
让list2=document.getElementById（'list2'）；
让range=document.createRange（）；
范围.setStartBefore（列表1）；
range.setEndAfter（列表2）；
document.getSelection（）.addRange（范围）；
console.log（document.getSelection（））；

也可作为

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

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

有没有一种方法可以使用选择API来实现我们想要的功能？

选择API没有指定“正确”的行为，这意味着不同浏览器的行为会有所不同。例如，在Firefox中，您的选择将或多或少符合您的期望，但WebKit和Blink将使其正常化（将两个点移动到他们认为合适的位置）。好消息是浏览器也不会尝试将无效片段放到您的放置区域。问题是他们扔下的东西是否符合你的要求。你试过了吗？您得到了什么？选择API没有指定“正确”的行为，这意味着不同浏览器的行为会有所不同。例如，在Firefox中，您的选择将或多或少符合您的期望，但WebKit和Blink将使其正常化（将两个点移动到他们认为合适的位置）。好消息是浏览器也不会尝试将无效片段放到您的放置区域。问题是他们扔下的东西是否符合你的要求。你试过了吗？你得到了什么？