jQuery 可选择带句柄和可排序答案

【问题标题】：jQuery selectable with handle and sortablejQuery 可选择带句柄和可排序
【发布时间】：2013-05-03 14:59:54
【问题描述】：

我在手风琴中有一个可选列表，当您从列表中选择一个项目时，该项目会出现在您选择的列列表中。我的问题是我想使用句柄来选择一个项目（句柄是一个加号）并使文本出现在选定的列表中。

这是我的小提琴：http://jsfiddle.net/kmbonin82/NkgC2/16/

如您所见，当您单击加号时，它不会将文本放入所选项目列表中。关于如何纠正这个问题的任何想法？

这是应该将文本放入选定列列表的 JS：

 $(function () {
       $(".list div") 
       .selectable({
           handle: ".handle",
           stop: function () {

               var result = $("#select-result");                       

               $(".ui-selected", this).each(function () {
                   var index = $(".list li").index(this);                    
                   $(this).css('background-color', '#669966');
                   $(this).css('color', '#FFFFFF');
                   result.append('<li id="' + $(this).attr('id')  + '">' + $(this).text() + '</li>');
                   sortColumns();
               });
           }
       })           
      sortColumns();
   });

【问题讨论】：

标签： jquery-ui-sortable jquery-ui-selectable

【解决方案1】：

要将值放入所选列表中，我必须获取持有加号的索引，然后使用该索引，获取具有相同索引的 li 的 text 和 id 值。然后我可以将它涂成绿色，表示它已被选中并将其添加到列表中。

这是小提琴：http://jsfiddle.net/kmbonin82/NkgC2/17/

$("ul li div").click(function () {
         var index = $("ul li div").index(this);
         var listLiText = $("ul.list li").eq(index).text();
          var listLiID = $("ul.list li").eq(index).attr('id');

          $("ul.list li").eq(index).css('background-color', '#669966');
          $("ul.list li").eq(index).css('color', '#FFFFFF');

           if ($("#select-result #" + listLiID).length == 0) {
                 result.append('<li id="' + listLiID + '">' + listLiText + '</li>');
            }                      
  });

【讨论】：