Question

我在组合jquery sortable和selectable方面遇到了困难。

我有两个列表，希望能够从一个列表拖动到另一个列表（无法选择的列表）

但是可选择而不是拖动它只是再次选择，有没有办法禁用所选项目上的选择或将拖动手柄放在选择手柄的外部，这样他们就不会干涉。

这是代码。

$(function() {
  $(".available, .assigned").sortable({
    connectWith: ".connected",
    handle: ".handle"
  });

  $(".available, .assigned").selectable({ filter: "li", cancel: ".handle" })
  $(".available, .assigned").disableSelection();
});

http://jsfiddle.net/MJYRD/

据我所知，这是jQuery UI sortable & selectable

感谢

Answer 1

我设法让它有点工作。 Check the fiddle.

基本上，我使用jquery.multisortable插件扩展了默认的sortable小部件。这样，您可以通过 Ctrl +单击它们来选择多个项目。您可以拖动以在列表之间重新排序和/或移动项目。

或者，如果您想通过选择矩形和拖动手柄坚持原始机制，您仍然可以使用selectable（demo）。唯一的缺点是multiselectable后面的multisortable行为保持活动状态，这意味着它仍然尝试处理Ctrl +点击（但失败）。这只是一个小麻烦，你可以调整multisortable的代码，这样它就不会扩展multiselectable来解决这个问题。

Answer 2

由于拖动操作与执行选择的操作大致相同，因此如果已经选择了某个项目，则必须取消选择。

$(".available, .assigned").selectable({ 
    filter: "li", 
    cancel: ".ui-selected"
})

$("available, .assigned").sortable()

Answer 3

这是我的解决方法，使列表可选择和排序，并允许套索实现。这是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>
$(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);
    }
});




//
});


<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 blue;
}
#album2 {
    list-style: none;
    float: left;
    width: 20%;
    border: 1px solid blue;
}
#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 green;
}
</style>


<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>
</html>

JQuery UI，可排序和可选择

3 个答案: