0

内部に選択可能なリストを持つ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>");
       });
   }
4

1 に答える 1