jquery - 拖放多个带有选项的选择

Question

我有两个带有选项的多重选择。我想要将选项从一个多选元素拖放到另一个元素。

问题是我猜多个选择不允许拖动。现在，我尝试在单击任何选项时创建一个新的可拖动元素并将其附加到正文。运行良好。但问题是，当我单击并开始拖动选项时，我无法开始拖动元素。我必须再次单击并开始拖动我的可拖动元素。

是否有任何事件可以开始拖动？这样我就可以在创建新元素后单击选项触发？所以感觉我的选择被拖了。

注意:在我的情况下，我只能使用多重选择。我不能在这里使用 jQuery UI 可排序或其他类似的小部件。

这就是我正在尝试做的事情。现在这是一个粗略的想法。解决后我会重构它

$(document).on('mousedown', 'select option', function(e) {
    var self = $(this);
    var offset = self.offset();
    var draggableDiv = $('<div />').prop('id', 'draggable').css({
        position: 'absolute',
        left: offset.left,
        top: offset.top,
        width: self.width(),
        height: self.height(),
        cursor: 'default',
        background: '#ff0',
        opacity: 0.5
    }).text(self.text());
    $('body').append(draggableDiv);

    draggableDiv.draggable({
        revert: true,
        containment: 'window'
    });

    // function to start drag goes here
    draggableDiv.trigger('dragstart');
});

Answer 1

$(document).ready(function(){
    $(".droppable").droppable({
       drop: function(event, ui) {
        var $list = $(this);
        $helper = ui.helper;
        $($helper).removeClass("selected");
        var $selected = $(".selected");                 
        if($selected.length > 1){                       
            moveSelected($list,$selected);
        }else{
            moveItem(ui.draggable,$list);
}                                       
        }, tolerance: "touch"
         });

             $(".draggable").draggable({
                revert: "invalid",
                helper: "clone",
                cursor: "move",
                drag: function(event,ui){
                    var $helper = ui.helper;
                    $($helper).removeClass("selected");
                    var $selected = $(".selected"); 
                    if($selected.length > 1){   
                        $($helper).html($selected.length + " items");
                    }                                       
                }
             });

            function moveSelected($list,$selected){
                $($selected).each(function(){
                    $(this).fadeOut(function(){
                        $(this).appendTo($list).removeClass("selected").fadeIn();
                    });                 
                });             
            }

            function moveItem( $item,$list ) {
                $item.fadeOut(function() {
                    $item.find(".item").remove();
                    $item.appendTo( $list ).fadeIn();
                });
            }

            $(".item").click(function(){
                $(this).toggleClass("selected");
            });

        });

http://jsfiddle.net/caferdo/k5XJv/3/

这是一个例子