Question

我有一个ul列表和一个multipe选择框，我想知道如何使用可排序将选项排序为li元素（我必须使用Jquery UI来开始/停止可排序的位置）。

示例（我的jsfiddle）：

<select id="myselect" multiple>
 <option value="vA">A</option>
 <option value="vB">B</option>
 <option value="vC">C</option>
 <option value="vD">D</option>
</select>

<ul class="myul">
 <li>AnElementP1</li>
 <li>AnElementP2</li>
 <li>AnElementP3</li>
 <li>AnElementP4</li>
</ul>

的Javascript

$(document).ready(function () {

 $(".myul").sortable({ 
        start: function(event, ui) {
            ui.item.startPosition = ui.item.index();

        },
        stop: function(event, ui) {
            console.log("Start position: " + ui.item.startPosition);
                    console.log("New position: " + ui.item.index());
                        // How can i sort the select box option's
        }
    });

});

Answer 1

得到它！

也许这可以帮助别人。

链接到Jsfiddle

$(document).ready(function () {

 $(".myul").sortable({ 
        start: function(event, ui) {
            ui.item.startPosition = ui.item.index();
        },
        stop: function(event, ui) {
            var El = $("#myselect option").eq(ui.item.startPosition);
            var cpy = El.clone();
            if (El.is(':selected'))
            {
              cpy.attr("selected","selected");
            }
            El.remove();
            if (ui.item.index() === 0)
                $("#myselect").prepend(cpy);
            else
                $("#myselect option").eq(ui.item.index() -1).after(cpy);

        }
    });
});

修改

.clone（）不会克隆选定的值（See ticket），这就是我添加条件的原因。

if (El.is(':selected')) { cpy.attr("selected","selected"); }

Answer 2

看起来你已经自己解决了:) 在没有克隆自己的情况下尝试变种，将其作为替代方案发布在此处：

$(document).ready(function () {

 $(".myul").sortable({ 
        start: function(event, ui) {
            ui.item.startPos = ui.item.index();

        },
        stop: function(event, ui) {
          var newPos = ui.item.index();
          var startPos =ui.item.startPos;
          if(newPos < startPos)newPos--;
          var dropdown =  $("#myselect")[0];          
          var tomove =  $(dropdown.options[startPos]);       
          if(newPos===-1)
            $(dropdown.options[0]).before(tomove);
          else
            $(dropdown.options[newPos]).after(tomove);

        }
    });

});

jquery可排序多重选择

2 个答案: