使用选项拖放多项选择

Question

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

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

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

注意：在我的情况下，我只能使用多项选择。我不能在这里使用 jQuery UI sortable 或其他类型的小部件。

这就是我想要做的。现在是粗略的想法。解决后我会重构它

$(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/

这是一个例子

Answer 2

我改变了事件的目标，在将它传递给可拖动之前，也是固定位置（见 cmets）

$(document).on('mousedown', 'select option', function(e) {
    var self = $(this);
    var offset = self.offset();
    var draggableDiv = $('<div />').prop('id', 'draggable').css({
        position: 'absolute',
        left: e.pageX,   // <-HERE
        top:  e.pageY,
        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'
    });
    e.target=draggableDiv.get(0);  // <-HERE
    // function to start drag goes here
    draggableDiv.trigger(e);
});

demo

other demo - 对我来说看起来更准确