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).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 - 对我来说看起来更准确

Answer 2

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

这是一个例子

使用选项拖放多个选择

2 个答案: