【发布时间】：2018-03-25 04:36:35
【问题描述】：
我正在尝试使用 jQuery UI 的可排序连接多个嵌套项。
代码正确选择了可拖动/可放置的项目，但所选项目不能嵌套在其他地方。
我应该如何允许在所有 weblog-sections 和 item-body 元素中连接（嵌套）？
<!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 脚本。
无论我尝试什么，我最终都会遇到父子错误。
干杯
【问题讨论】：
标签： sorting jquery-ui nested jquery-ui-sortable multi-level