Javascript HTML5：通过拖放对ul的子元素li重新排序，li元素之间的边界丢失_Javascript_Css_Html

Javascript HTML5：通过拖放对ul的子元素li重新排序，li元素之间的边界丢失

javascript css html

Javascript HTML5：通过拖放对ul的子元素li重新排序，li元素之间的边界丢失,javascript,css,html,Javascript,Css,Html,原始列表如下：拖放后，图片如下：项目1和项目2已连接，如何解决此问题？我的目的是通过拖放对列表项重新排序。提前谢谢。这是密码 <!DOCTYPE html> <html> <head> <title>example</title> <style type="text/css"> .main-area { margin-left: 10%;

原始列表如下：

拖放后，图片如下：

项目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>


例子
.主要区域{
左边距：10%；
保证金权利：10%；
最小宽度：600px；
}
保险商实验室{
左侧填充：0；
文本对齐：居中；
}
李{
单词break：打破一切；
显示：内联块；
宽度：400px；
高度：200px；
利润底部：3倍；
边界半径：3px；
盒影：1px1p3pRGBA（0,0,0,1）；
}
//关于源元素
功能dragstart（ev）{
ev.dataTransfer.effectAllowed=“移动”；
ev.dataTransfer.setData（“srcId”，ev.currentTarget.id）；
ev.dataTransfer.SetDragage（ev.currentTarget，0,0）；
}
功能驱动（ev）{
ev.dataTransfer.clearData（“srcId”）；
}
//关于目标元素
功能牵引器（ev）{
ev.preventDefault（）；
}
功能下降（ev）{
var srcId=ev.dataTransfer.getData（“srcId”）；
var srcObj=document.getElementById（srcId）
如果（srcObj！=ev.currentTarget）{
var list=document.getElementById（'list'）
list.insertBefore（srcObj，ev.currentTarget）；
}
}


111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111


222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222


333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333


444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444

删除li之间的换行符将防止这种行为

这真的很奇怪，对我来说就像一只虫子

使用Chrome运行html文件。尝试创建livedemo，如调整浏览器窗口大小，使两个项目成为一行，然后拖放。如果使用JS动态添加li元素，如何删除换行符？用创建HTML的代码更新您的问题，我会看一看。动态添加li时似乎没有生成换行符。