jQuery ui多选拖动

前端之家收集整理的这篇文章主要介绍了jQuery ui多选拖动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要以下功能

>通过鼠标拖动和cntrl键从列表中选择项目,类似于jquery ui selectables.
>一次应该可以拖动多个项目.

我需要类似于操作系统拖放功能的应用程序.

我的问题是,如果我想选择拖动鼠标指针项的多个项目,如何解决它.

我试图使用代码,但它在选择多个项目时有一些缺陷.

$(document).ready(function(){

    var selectedClass = 'ui-state-highlight',clickDelay = 600,// click time (milliseconds)
        lastClick,diffClick; // timestamps

    $("#draggable li")
        // Script to deferentiate a click from a mousedown for drag event
        .bind('mousedown mouseup',function(e){
            if (e.type=="mousedown") {
                lastClick = e.timeStamp; // get mousedown time
            } else {
                diffClick = e.timeStamp - lastClick;
                if ( diffClick < clickDelay ) {
                    // add selected class to group draggable objects
                    $(this).toggleClass(selectedClass);
                }
            }
        })
        .draggable({
            revertDuration: 10,// grouped items animate separately,so leave this number low
            containment: '.demo',start: function(e,ui) {
                ui.helper.addClass(selectedClass);
            },stop: function(e,ui) {
                // reset group positions
                $('.' + selectedClass).css({ top:0,left:0 });
            },drag: function(e,ui) {
                // set selected group position to main dragged object
                // this works because the position is relative to the starting position
                $('.' + selectedClass).css({
                    top : ui.position.top,left: ui.position.left
                });
            }
        });

    $("#droppable,#draggable")
        .sortable()
        .droppable({
            drop: function(e,ui) {
                $('.' + selectedClass)
                 .appendTo($(this))
                 .add(ui.draggable) // ui.draggable is appended by the script,so add it after
                 .removeClass(selectedClass)
                 .css({ top:0,left:0 });
            }
        });

});

解决方法

这是多选拖动的演示

Demo

只需使用可选插件即可选择多个项目

$(".itemlist").selectable({filter:"li"});
原文链接:https://www.f2er.com/jquery/178414.html

猜你在找的jQuery相关文章