我正在尝试使用jQuery UI的可排序项连接多个嵌套项。
代码正确地选择了可拖动/可丢弃的项，但所选项不能嵌套在其他位置。
我应该如何允许在所有日志部分和条目主体元素中进行连接(嵌套)？
<!DOCTYPE html>
<html html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Sortable with jQuery test</title>
<style>#myToolTip {
display: none;
}
.Mainheading {
font-size: 2em;
color: red;
}
.weblog {
width: 65%;
padding: 5px;
margin: 10px;
font-family: monospace;
}
.weblog-section {
background-color: #EEE;
margin-bottom: 10px;
}
.item-body {
/*background-color: #EEE; */
}
div {
border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px #CCC dashed;
margin: 3px;
padding: 5px 5px;
}
OL {
counter-reset: item;
margin: 1px;
padding: 5px;
font-weight: bolder;
}
LI {
display: block;
font-size: 1.1em;
padding: 5px 10px;
background-color: #DDD;
margin: 1px;
border-radius: 5px;
-webkit-border-radius: 5px;
font-family: Tahoma;
}
LI:before { content: counters(item, ".") " "; counter-increment: item }
p {
padding: 0px 5px;
text-align:justify;
}
.toolbox, .toolbar:link{
color:white;
font-size: smaller;
font-family: monospace;
text-decoration:none;
}
#sortable { }
#sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
html>body #sortable li { height: 1.5em; line-height: 1.2em; }
.ui-state-highlight { height: 1.5em; line-height: 1.2em; }</style>
</head>
<body>
<ol>
<div class="weblog">
<div class="weblog-section">
<li>Some blog title</li>
<div class="item-body">
<p>Some blog text.</p>
</div>
</div>
<div class="weblog-section">
<li>Some blog title</li>
<div class="item-body">
<p>Some blog text.</p>
</div>
</div>
<div class="weblog-section">
<li>Some blog title</li>
<div class="item-body">
<!--<p></p>-->
<ol>
<div class="weblog-section">
<li>Some blog title</li>
<div class="item-body">
<p>Some blog text.</p>
</div>
</div>
</ol>
</div>
</div>
<div class="weblog-section">
<li>Some blog title</li>
<div class="item-body">
<p>Some blog text.</p>
</div>
</div>
</div>
</ol>
<script type="text/javascript" src='scripts/jquery-3.2.1.js'></script>
<script type="text/javascript" src="scripts/jquery-ui.js"></script>
<script>
$( function() {
$( ".weblog-section" ).sortable({
connectWith: ".weblog-section",
items: ".item-body"
});
$( ".weblog-section" ).disableSelection();
$( ".weblog" ).sortable({
connectWith: " > .item-body",
items: "> .weblog-section",
});
$( ".weblog" ).disableSelection();
} );
</script>
</body>
</html>
如果你运行代码，你就会识别出缺少了什么。Sortable在内部项上运行良好。但是，拖动一个博客标题并将其放在另一个部分是不可能的。
出于某种原因，我不知道应该使用什么逻辑来编写正确的jquery脚本。
无论我尝试了什么，我最终都会出现父子错误。
干杯
您要查找的功能没有内置在jQuery UI的Sortable中。
我想建议你看看https://github.com/ilikenwf/nestedSortable，因为它是jQuery Nested Sortable中选择的答案-在所有可用的UL'；s.