Question

我正在编写一个小概念验证应用程序，用于我想要添加到我的Web应用程序中的内容。我在这里找到了一些以前的代码并进行了修改以满足我的需求。我有一个可排序元素，目前使用ctrl-click和常规点击事件来移动项目。经过长时间的谷歌搜索和搜索 - 我发布了一个问题，希望有人对我有一些好的建议。请注意，我对编码还是比较新的。

我想实现一个shift-click功能，就像windows'一样。当用户轮班单击应该选择项目的可排序项目之一时，单击第二项（如果相关），然后选择它之间的所有项目，以便它们都可以移动。

http://jsfiddle.net/pYaRv/1/

代码：

clicked_list = []

$("ul").on('click', 'li', function (e) {
if (e.ctrlKey || e.metaKey) {
    $(this).toggleClass("selected");
    temp2 = $(this)

    if (jQuery.inArray(temp2[0]["innerText"], clicked_list) == -1){
        clicked_list.push(temp2[0]["innerText"])
    }else{
        index = jQuery.inArray(temp2[0]["innerText"], clicked_list)
        clicked_list.splice(index, 1)
    }

    $("#information").text("Ctrl-Clicked " + (temp2[0]["innerText"]))
}
else if(e.shiftKey)
{
    temp3 = $(this)
    $("#information").text("Shift-Clicked " + (temp3[0]["innerText"]))        
} 

else 
{
    if ($(this).hasClass('selected'))
    {
        $("#information").text("Un-Clicked " + (temp[0]["innerText"]))
        $(this).removeClass('selected')
    }
    else{
        temp = $(this)
        $("#information").text("Clicked " + (temp[0]["innerText"]))
        $(this).addClass("selected").siblings().removeClass('selected');                    
    }


}
}).sortable({
connectWith: "ul",
delay: 150,
revert: 0,
helper: function (e, item) {
    if (!item.hasClass('selected')) {
        item.addClass('selected').siblings().removeClass('selected');
    }   

    var elements = item.parent().children('.selected').clone();

    $("#information").text("Moved " + elements.length + " item(s)")

    item.data('multidrag', elements).siblings('.selected').remove();


    var helper = $('<li/>');
    return helper.append(elements);
},
stop: function (e, ui) {
    var elements = ui.item.data('multidrag');


    ui.item.after(elements).remove();
}

});

Answer 1

在本周末的研究中，我遇到了以下JQuery插件，它完全符合我的需要。

https://github.com/shvetsgroup/jquery.multisortable

使用可排序的实现shift-click

1 个答案: