内部に選択可能なリストを持つjqueryアコーディオンがあります。ユーザーがアイテムをクリックすると、ソート可能な選択済みアイテム リストに表示されます。デフォルトの列としてリストに表示される列がいくつかあり、選択された各項目はアコーディオンに緑色で表示されます。私の問題は、並べ替え可能なリストに 2 つの単語を含む項目は並べ替え可能ではありませんが、1 つの単語を含む項目は並べ替え可能であることです。理由がわかりません。何かご意見は?
これが私のフィドルです:http://jsfiddle.net/kmbonin82/NkgC2/9/
HTML:
<h3>List 1</h3>
<ul class="list">
<li id="Country">Country</li>
<li id="Region">Region</li>
<li id="Location_Name">Location Name</li>
<li id="Location_Start">Location Start</li>
</ul>
<h3>List 2</h3>
<ul class="list">
<li id="Contract_Start">Contract Start</li>
<li id="Contract_Status">Contract Status</li>
<li id="Contract">Contract</li>
</ul>
<p id="feedback">
<span>You've selected items:</span>
<ul id="select-result">
<li id="Region">Region</li>
<li id="Location Name">Location Name</li>
<li id="Country">Country</li>
<li id="Contract Status">Contract Status</li>
</ul>
</p>
JS:
$(function () {
$(".list").selectable({
stop: function () {
var result = $("#select-result");
$(".ui-selected", this).each(function () {
$(this).css('background-color', '#669966');
$(this).css('color', '#FFFFFF');
result.append('<li id="' + $(this).text() + '">' + $(this).text() + '</li>');
sortColumns();
});
}
});
sortColumns();
});
$(function () {
$("#accordion").accordion({
collapsible: true,
autoHeight: false
});
});
$(function () {
$("#select-result li").each(function (index) {
var thisID = $(this).attr('id');
thisID = thisID.replace(/ /g, '_');
document.getElementById(thisID).style.background = '#669966';
document.getElementById(thisID).style.color = '#FFFFFF';
sortColumns();
});
});
function sortColumns() {
$(function () {
$("#select-result")
.sortable({
handle: ".handle",
over: function () {
removeIntent = false;
},
out: function () {
removeIntent = true;
},
beforeStop: function (event, ui) {
if (removeIntent == true) {
var thisID = ui.item.text();
thisID = thisID.replace(/ /g, '_');
ui.item.remove();
document.getElementById(thisID).style.background = '#FFFFFF';
document.getElementById(thisID).style.color = '#000000';
}
}
})
.find("li")
.addClass("ui-corner-all")
.prepend("<div class='handle'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>");
});
}