jquery可排序的多選

我有一個ul列表和multipe選擇框，我想知道如何使用jQuery UI來排序選項的li元素（我必須啓動/停止排序的位置）。jquery可排序的多選

例（我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 
     } 
    }); 

});

來源

2014-05-15 zeomega

參閱此http：//計算器.com/a/15640232/2260614 ...這可能有幫助.. – Bhavik

這是一個好主意！謝謝，不幸的是我不能使用'ID'到選擇選項，我試圖解決這個問題，只是使用位置..但你的鏈接是有希望的:) – zeomega

得到它！

也許這可以幫助某人。

鏈接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"); 
}

來源

2014-05-15 12:33:54 zeomega

看起來你已經解決了，它已經自己:) 試圖出一個變體，而不克隆自己，將它張貼在這裏作爲一種替代方案：

$(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); 

     } 
    }); 

});

來源

2014-05-15 13:35:53

jquery可排序的多選

回答

相關問題