web-dev-qa-db-ja.com

jQuery UI：元のdivからドラッグして複製しますが、複製は保持します

JQuery UI Draggableが適用されたdivがあります。私がしたいことは、それをクリックしてドラッグし、domに保持され、ドロップしても削除されないクローンを作成することです。

カードのデッキについて考えてみます。私のボックス要素はデッキです。そのデッキからカード/ divを引き出して、ページの周りに配置させたいのですが、それらは元のdivのクローンです。クローンしたdivの1つの別のクローンを作成できないことを確認したいだけです。

私は以下を使用しましたが、期待したように機能しませんでした：

$(".box").draggable({ 
        axis: 'y',
        containment: 'html',
        start: function(event, ui) {
            $(this).clone().appendTo('body');
        }
});

私は自分の解決策を見つけました：

$(".box-clone").live('mouseover', function() {
    $(this).draggable({ 
        axis: 'y',
        containment: 'html'
    });
});
$(".box").draggable({ 
    axis: 'y',
    containment: 'html',
    helper: 'clone'
    stop: function(event, ui) {
        $(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body');
    }
});
javascriptjqueryjquery-uiinterfaceclone
24
Nic Hubbard

これが私が最終的に機能したことです：

$(".box-clone").live('mouseover', function() {
    $(this).draggable({ 
        axis: 'y',
        containment: 'html'
    });
});
$(".box").draggable({ 
    axis: 'y',
    containment: 'html',
    helper: 'clone',
    stop: function(event, ui) {
        $(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body');
    }
});
20
Nic Hubbard

#source <ul />から#destination <ul />に要素（たとえば<li />）を移動する場合、それらを（移動ではなく）複製して、右側でソート可能、私はこの解決策を見つけました：

$(function() {

    $("#source li").draggable({
        connectToSortable: '#destination',
        helper: 'clone'
    })

    $("#destination").sortable();

  });

とてもシンプルに見えますが、うまくいきました！ :)

8
Spider

これが彼の解決策です：

$(".box-clone").live('mouseover', function() {
    $(this).draggable({ 
        axis: 'y',
        containment: 'html'
    });
});
$(".box").draggable({ 
    axis: 'y',
    containment: 'html',
    helper: 'clone'
    stop: function(event, ui) {
        $(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body');
    }
});
1
jjclarkson

PSは次のように機能します。「マーカー」はドラッグするオブジェクトで、「マップ」は宛先コンテナです。

$(document).ready(function() {
    //source flag whether the drag is on the marker tool template
    var template = 0;
    //variable index
    var j = 0;
    $(".marker").draggable({
        helper: 'clone',
        snap: '.map',
        start: function(event, ui) {
            //set the marker tool template
            template = 1;
        }
    });
    $(".map").droppable({
        accept: ".marker",
        drop: function(event, ui) {
            $(this).find('.map').remove();
            var item = $(ui.helper);
            var objectid = item.attr('id');
            //if the drag is on the marker tool template
            if (template == 1) {
                var cloned = $(item.clone());
                cloned.attr('id', 'marker' + j++);
                objectid = cloned.attr('id');
                cloned.draggable({
                    containment: '.map',
                    cursor: 'move',
                    snap: '.map',
                    start: function(event, ui) {
                        //Reset the drag source flag 
                        template = 0;
                    }
                });
                cloned.bind("contextmenu", function(e) {
                    cloned.remove();
                    return false;
                });
                $(this).append(cloned);
            }
            i++;
            var offsetXPos = parseInt(ui.offset.left - $(this).offset().left);
            var offsetYPos = parseInt(ui.offset.top - $(this).offset().top);
            alert("Dragged " + objectid + " to (" + offsetXPos + "," + offsetYPos + ")");
        }
    });
});
0
suresh