多选拖放

Question

如何在不使用Qwerty键盘ctrl关键字的情况下选择多行。例如:- http://jsfiddle.net/hQnWG/614/在本例中，我希望在单击时选择多行，而不是使用ctrl关键字。

​

$("ul").on('click', 'li', function (e) {
    if (e.ctrlKey || e.metaKey) {
        $(this).toggleClass("selected");
    } else {
        $(this).addClass("selected").siblings().removeClass('selected');
    }
}).sortable({
    connectWith: "ul",
    delay: 150, //Needed to prevent accidental drag when trying to select
    revert: 0,
    helper: function (e, item) {
        //Basically, if you grab an unhighlighted item to drag, it will deselect (unhighlight) everything else
        if (!item.hasClass('selected')) {
            item.addClass('selected').siblings().removeClass('selected');
        }
        
        //////////////////////////////////////////////////////////////////////
        //HERE'S HOW TO PASS THE SELECTED ITEMS TO THE `stop()` FUNCTION:
        
        //Clone the selected items into an array
        var elements = item.parent().children('.selected').clone();
        
        //Add a property to `item` called 'multidrag` that contains the 
        //  selected items, then remove the selected items from the source list
        item.data('multidrag', elements).siblings('.selected').remove();
        
        //Now the selected items exist in memory, attached to the `item`,
        //  so we can access them later when we get to the `stop()` callback
        
        //Create the helper
        var helper = $('<li/>');
        return helper.append(elements);
    },
    stop: function (e, ui) {
        //Now we access those items that we stored in `item`s data!
        var elements = ui.item.data('multidrag');
        
        //`elements` now contains the originally selected items from the source list (the dragged items)!!
        
        //Finally I insert the selected items after the `item`, then remove the `item`, since 
        //  item is a duplicate of one of the selected items.
        ui.item.after(elements).remove();
    }

});

ul {
    border:1px solid Black;
    width:200px;
    height:200px;
    display:inline-block;
    vertical-align:top
}
li {
    background-color:Azure;
    border-bottom:1px dotted Gray
}
li.selected {
    background-color:GoldenRod
}

<p>Multi-select Drag</p>
<p>
    <kbd>Click</kbd> to select individual items<br />
    <kbd>Ctrl + Click</kbd> to select multiple items
</p>
<br />

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
<ul>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

​

Answer 1

您在此处设置了使用ctrl键选择多个项目的条件。你只需要移除它。

if (e.ctrlKey || e.metaKey) {
        $(this).toggleClass("selected");
} else {
        $(this).addClass("selected").siblings().removeClass('selected');
}

取而代之的是你可以直接放入：

$(this).toggleClass("selected");