HTML5：通过拖放重新排序ul的孩子li，li元素之间的边界错过 [英] HTML5: Reorder the children li of ul by drag and drop, the borders between li elements are missed
本文介绍了HTML5：通过拖放重新排序ul的孩子li，li元素之间的边界错过的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
原始列表如下：
拖放后，图片如下：
项目1和项目2已连接，如何解决此问题？
我的目的是通过拖放重新排序列表项。提前致谢。
这是代码
<！DOCTYPE html>
< html>
< head>
< title>示例< / 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>
//源元素
函数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）;
}
//目标元素
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 =trueondragstart =dragstart（event）ondragend =dragend（event）ondragover =dragover（event）ondrop =drop ;
11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
< / li>
< li id ='2'draggable =trueondragstart =dragstart（event）ondragend =dragend（event）ondragover =dragover（event）ondrop =drop ;
222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222
< / li>
< li id ='3'draggable =trueondragstart =dragstart（event）ondragend =dragend（event）ondragover =dragover（event）ondrop =drop ;
33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333
< / li>
< li id ='4'draggable =trueondragstart =dragstart（event）ondragend =dragend（event）ondragover =dragover（event）ondrop =drop ;
444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444
< / li>
< / ul>
< / div>
< / body>
< / html>
解决方案
删除li之间的换行符会阻止行为。
这真的很奇怪，对我来说似乎是一个bug。 以下是类似文章
The original list as below:
After drag and drop, the pic as below:
The item 1 and item 2 are connected, how to fix this issue? My intent is to reorder the list items by drag and drop. Thanks in advance. Here is the code
<!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>
解决方案
Removing linebreaks between li's will prevent the behavior.
It's really weird and seems like a bug to me. Here's a similar article
这篇关于HTML5：通过拖放重新排序ul的孩子li，li元素之间的边界错过的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
