jQuery UI可排序和可選

32

剛剛發現this很容易的解決方案，從rdworth：

CSS：

ul { width: 300px; list-style: none; margin: 0; padding: 0; } 
li { background: white; position:relative;margin: 1em 0; padding: 1em; border: 2px solid gray; list-style: none; padding-left: 42px; } 
li .handle { background: #f8f8f8; position: absolute; left: 0; top: 0; bottom: 0; padding:8px; } 
.ui-selecting { background: #eee; } 
.ui-selecting .handle { background: #ddd; } 
.ui-selected { background: #def; } 
.ui-selected .handle { background: #cde; }

HTML：

<ul id="list"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
</ul>

的Javascript：

$("#list") 
    .sortable({ handle: ".handle" }) 
    .selectable({ filter: "li", cancel: ".handle" }) 
    .find("li") 
     .addClass("ui-corner-all") 
     .prepend("<div class='handle'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>");

參見：this小提琴。

來源

2012-04-03 12:18:47 mhu

+0

真棒找到。謝謝。 – 2012-05-19 19:48:51

+0

這工作得很好。我必須將這些選項傳遞給可選項，以便它不會將句柄視爲單獨的可選對象，並且在拖動它們時不會開始選擇：'{filter：'li'，cancel：'.handle'}' – Nick 2013-04-18 15:06:42

+0

@尼克：加了你的建議 – mhu 2013-04-18 20:18:38

5

http://jsfiddle.net/t9YTB/

這是像我可以給ü:)但這個想法是存在的。它不是alllll完成，但希望美國可以發揮一下的價值觀，看看它是從那裏怎麼一回事呢:)我的jQuery基庫的

來源

2011-02-23 13:18:23 Val

+0

感謝您的幫助 – minnur 2011-02-26 02:04:33

+3

@minnur，說謝謝你很好。投票的答案是更好:) – 2011-07-19 14:48:23

+0

他得到了比我更多的問題投票lol :) – Val 2011-07-20 08:58:05

0

部分包括以下內容，因爲它是通常討厭當你去拖東西，最終不是選擇文本...

// disables text selection on sortable, draggable items 
$(".sortable").sortable(); 
$(".sortable").disableSelection();

不知道如果你可以翻轉「禁用」爲「Enable」，但有我的$ .02。雖然沒有嘗試過......常識意味着你可能需要在同一個「group」元素中定義一個非活動部分，爲拖動動作提供一個「句柄......」，否則這些點擊可能被無情地誤認爲是意圖選擇/編輯...

來源

2011-06-20 16:45:13

0

試試這個。您可以使用Ctrl + Click多選擇和排序

http://jsfiddle.net/r83vrm0q/

來源

2015-01-17 21:48:27 kadir950

+0

請在答案本身中添加代碼的相關部分... – 2016-07-01 09:50:19

0

如果要選擇多個元素和MOVE他們全都另一份清單，這fiddle效果很好：

HTML：

<meta charset="utf-8" /> 
<title>jQuery UI Sortable with Selectable</title> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<body> 

<ul id="album" class="connectedSortable"> 
    <li id="li1"><div>1- First</div></li> 
    <li id="li2"><div>2- Second</div></li> 
    <li id="li3"><div>3- Third</div></li> 
    <li id="li4"><div>4- Fourth</div></li> 
    <li id="li5"><div>5- Fifth</div></li> 
    <li id="li6"><div>6- Sixth</div></li> 
    <li id="li7"><div>7- Seventh</div></li> 
    <li id="li8"><div>8- Eighth</div></li> 
</ul> 

<ul id="album2" class="connectedSortable"> 
    <li id="li1"><div>1- 1</div></li> 
    <li id="li2"><div>2- 2</div></li> 
    <li id="li3"><div>3- 3</div></li> 
    <li id="li4"><div>4- 4</div></li> 
    <li id="li5"><div>5- 5</div></li> 
    <li id="li6"><div>6- 6</div></li> 
    <li id="li7"><div>7- 7</div></li> 
    <li id="li8"><div>8- 8</div></li> 
</ul> 
<div id="anotheralbum" class="connectedSortable"> 
another album - no style for the lists inside here 
</div> 

<br style="clear:both"> 

</body>

Javascript：

<script> 
$(function() { 
// 

$('body').selectable({ 
    filter: 'li' 
    //filter: '#album2 > li' 
}); 

/* 
Since the sortable seems unable to move more than one object at a 
time, we'll do this: 

The LIs should act only as wrappers for DIVs. 

When sorting a LI, move all the DIVs that are children of selected 
LIs to inside the sorting LI (this will make them move together); 
but before doing that, save inside the DIVs a reference to their 
respective original parents, so we can restore them later. 

When the user drop the sorting, restore the DIVs to their original 
parent LIs and place those LIs right after the just-dropped LI. 

Voilá! 

Tip: doesn't work so great if you try to stick the LIs inside the LI 
*/ 

$('.connectedSortable').sortable({ 
    connectWith: ".connectedSortable", 
    delay: 100, 
    start: function(e, ui) { 
     var topleft = 0; 

     // if the current sorting LI is not selected, select 
     $(ui.item).addClass('ui-selected'); 

     $('.ui-selected div').each(function() { 

      // save reference to original parent 
      var originalParent = $(this).parent()[0]; 
      $(this).data('origin', originalParent); 

      // position each DIV in cascade 
      $(this).css('position', 'absolute'); 
      $(this).css('top', topleft); 
      $(this).css('left', topleft); 
      topleft += 20; 

     }).appendTo(ui.item); // glue them all inside current sorting LI 

    }, 
    stop: function(e, ui) { 
     $(ui.item).children().each(function() { 

      // restore all the DIVs in the sorting LI to their original parents 
      var originalParent = $(this).data('origin'); 
      $(this).appendTo(originalParent); 

      // remove the cascade positioning 
      $(this).css('position', ''); 
      $(this).css('top', ''); 
      $(this).css('left', ''); 
     }); 

     // put the selected LIs after the just-dropped sorting LI 
     $('#album .ui-selected').insertAfter(ui.item); 

     // put the selected LIs after the just-dropped sorting LI 
     $('#album2 .ui-selected').insertAfter(ui.item); 
    } 
}); 




// 
}); 
</script>

CSS：

<style> 
*, 
*:before, 
*:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

#album { 
    list-style: none; 
    float: left; 
    width: 20%; 
    border: 1px solid red; 
} 
#album2 { 
    list-style: none; 
    float: left; 
    width: 20%; 
    border: 1px solid red; 
} 
#album li { 
    float: left; 
    margin: 5px; 
} 

#album2 li { 
    float: left; 
    margin: 5px; 
} 


#album div { 
    width: 100px; 
    height: 100px; 
    border: 1px solid #CCC; 

    background: #F6F6F6;  
} 
#album2 div { 
    width: 100px; 
    height: 100px; 
    border: 1px solid #CCC; 

    background: #F6F6F6;  
} 
#album .ui-sortable-placeholder { 
    border: 1px dashed #CCC; 
    width: 100px; 
    height: 100px; 
    background: none; 
    visibility: visible !important; 
} 
#album2 .ui-sortable-placeholder { 
    border: 1px dashed #CCC; 
    width: 100px; 
    height: 100px; 
    background: none; 
    visibility: visible !important; 
} 

#album .ui-selecting div, 
#album .ui-selected div { 
    background-color: #3C6; 
} 

#album2 .ui-selecting div, 
#album2 .ui-selected div { 
    background-color: #3C6; 
} 

#anotheralbum { 
    list-style: none; 
    float: left; 
    width: 20%; 
    height: 800px; 
    border: 1px solid blue; 
} 
</style>

這是從例如在http://www.pieromori.com.br/snippets/sortable_with_selectable.html感謝皮耶羅森修改。

來源

2015-02-10 21:52:22 MooseEagleShark

jQuery UI可排序和可選

回答

相關問題