0
jQuery UIのソート可能なアイテムを使用して複数のネストされたアイテムを接続しようとしています。jQuery UIのネストされたソート可能なアイテムの接続
コードでは、ドラッグ可能/ドロップ可能アイテムを正しく選択していますが、選択したアイテムは他の場所にネストすることはできません。
すべてのweblogセクションと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スクリプトを書くために使うべき論理を理解できませんでした。
私が試したことは何でも、私は親子エラーを取得しました。あなたが探している
乾杯
私はあなたが何を意味するか分かりません。セクションの内容がドラッグされてソートされないようにしますか？ –
前に私の奇妙なコメントに申し訳ありません！同じセクションの段落は兄弟のままです。しかし、このコードでは、現在のところ、お互いの子供を作ることができます。 https://github.com/ilikenwf/nestedSortable ます。https：// githubの – Jeremy
はここ – Jeremy