jQueryUI的排序 - 是複雜的選擇可以在「項目」

Question

我有使用jQueryUI的的排序功能的問題：

<div class="sortable"> 
     <div class="ui-state-default"> 
      <h4></h4> 
      <input type="text" /> 
      <button></button> 
     </div> 
     ...more <div> 
    </div> 

我的目標不是要能夠排序整個格但只有輸入-元件。那可能嗎？

我已經嘗試過一些事情，但是毫無效果......

$(".sortable").sortable({ items: "> input" }); 
$(".sortable").sortable({ items: "> input[type=text]" }); 
$(".sortable").sortable({ items: "> div > input" }); 
$(".sortable").sortable("option", 'items', 'div > input'); 

我已經用Google搜索的解決方案，但什麼也沒發現，除了這個similar question的，但我不認爲.cancel（）函數可以成爲我的解決方案。

任何幫助？

Answer 1

您遇到的問題是輸入框本身不能作爲可拖動的句柄。你需要用span或div來包裝你的輸入，然後在{ items: }標籤中使用它。您仍然無法拿起輸入框本身，所以我強烈建議您在div內使用一個手柄進行拖動，以使操作更直觀。

或者，您可以在輸入頂部添加一個帶有{ position: absolute; width: 100%; height:100% }的隱藏div作爲句柄，但這會使您的輸入不可編輯，因爲點擊會觸及該div而不是您的輸入。