Question

原始列表如下： Normal

拖放后，图片如下： Error

项目1和项目2已连接，如何解决此问题？我的目的是通过拖放重新排序列表项。提前致谢。这是代码

<!DOCTYPE html>
<html>
<head>
    <title>example</title>

    <style type="text/css">
        .main-area {
            margin-left: 10%;
            margin-right: 10%;
            min-width: 600px;
        }

        ul {
            padding-left: 0;
            text-align:center;
        }

        li {
            word-break: break-all;
            display: inline-block;
            width: 400px;
            height: 200px;
            margin-bottom: 3px;
            border-radius: 3px;
            box-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
        }
    </style>
</head>
<body>
    <script>
        // on source element
        function dragstart (ev) {
            ev.dataTransfer.effectAllowed = "move";
            ev.dataTransfer.setData("srcId", ev.currentTarget.id);
            ev.dataTransfer.setDragImage(ev.currentTarget, 0, 0);
        }
        function dragend(ev) {
            ev.dataTransfer.clearData("srcId");
        }

        // on target element
        function dragover(ev) {
            ev.preventDefault();
        }
        function drop(ev) {
            var srcId = ev.dataTransfer.getData("srcId");
            var srcObj = document.getElementById(srcId)
            if(srcObj != ev.currentTarget){
                var list = document.getElementById('list')
                list.insertBefore(srcObj, ev.currentTarget);
            }
        }
    </script>
    <div id='main-area'>
        <ul id='list'>
            <li id='1' draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)" ondragover="dragover(event)" ondrop="drop(event)">
                111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
            </li>
            <li id='2' draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)" ondragover="dragover(event)" ondrop="drop(event)">
                222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222
            </li>
            <li id='3' draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)" ondragover="dragover(event)" ondrop="drop(event)">
                333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333
            </li>
            <li id='4' draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)" ondragover="dragover(event)" ondrop="drop(event)">
                444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444
            </li>
        </ul>
    </div>
</body>
</html>

Answer 1

删除li之间的换行符会阻止此行为。

Demo

这真的很奇怪，对我来说似乎是一个错误。 Here's a similar article

HTML5：通过拖放重新排序ul的子li，错过了li元素之间的边界

1 个答案: