如何在不使用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>
答案 0 :(得分:0)
您已在此处设置条件以使用ctrl键选择多个项目。你只需要删除它。
if (e.ctrlKey || e.metaKey) {
$(this).toggleClass("selected");
} else {
$(this).addClass("selected").siblings().removeClass('selected');
}
取代它,您可以直接放置:
$(this).toggleClass("selected");