Question

我有一个带有可选列表的jquery手风琴。当用户单击某个项目时，它将显示在所选项目列表中，该列表是可排序的。列表中有许多列显示为默认列，选中的每个项目在手风琴中显示为绿色。我的问题是，可排序列表中包含两个单词的订单项不可排序，但有一个单词的项目是。我无法弄清楚为什么。有什么想法吗？

这是我的小提琴：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>");
       });
   }

Answer 1

“位置名称”和“合同状态”不可排序，因为它们的ID值错误。你们之间有空间。

        <li id="Location Name">Location Name</li>
        <li id="Contract Status">Contract Status</li>

更新演示：http://jsfiddle.net/NkgC2/10/

加成：

a）你预先处理div的方式不正确。如果你看到你的html代码，在你选择的每个项目之后，它会为每个列表项添加一个额外的div

b）而不是多次调用sortable（）函数（它甚至在选择任何项之前都会调用3次。）使用jquery'on'方法将api绑定到不存在的元素。

jQuery可排序无法正常工作

1 个答案: