1. 首页
  2. 问答
  3. jQuery UI可排序和可选

jQuery UI可排序和可选

2010-08-02 107 views

回答

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

如果要选择多个元素和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

相关问题

 相关问题