1

オプション付きの2つの複数選択があります。ある複数選択要素から別の要素にドラッグ アンド ドロップ オプションが必要です。

問題は、複数選択でドラッグできないことだと思います。今、任意のオプションをクリックして新しいドラッグ可能な要素を作成し、それを本文に追加しようとしています。それはうまくいっています。しかし、問題は、オプションをクリックしてドラッグを開始すると、要素のドラッグを開始できないことです。ドラッグ可能な要素をもう一度クリックしてドラッグを開始する必要があります。

ドラッグを開始するイベントはありますか? 新しい要素を作成した後にオプションのクリックでトリガーできるようにするには? 私のオプションがドラッグされているように感じるように。

注：私の場合、複数選択のみを使用する必要があります。ここでは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');
});
4

2 に答える 2

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

ここに例があります

于 2013-02-21T17:38:57.520 に答える
3

ドラッグ可能に渡す前に、イベントのターゲットを変更し、位置も固定しました（コメントを参照）

$(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);
});

デモ

他のデモ- 私にはもう少し正確に見えます

于 2013-02-04T07:07:36.957 に答える