jQuery Kullanıcı Arayüzü: Orijinal div den sürükle ve klonlayın, ancak klonları koruyun

Question

JQuery UI Sürüklenebilir uygulanmış bir div var. Yapmak istediğim şey, tıklayıp sürüklemektir, ve dom içinde tutulan ve bırakıldığında çıkarılmamış bir klon oluşturur.

Bir kart destesi düşünün, kutu elemanım güvertedir ve kartların/divanların o güverteden çekilmesini ve sayfamın etrafına serilmesini istiyorum, ancak orijinal divun klonları olurlar. Sadece klonlanmış divlardan birinin başka bir klonunu oluşturamayacağından emin olmak istiyorum.

Ben istediğim gibi çalışmadı hangi aşağıdakileri kullandık:

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

Answer 1

: Burada

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

Answer 2

onun çözümü oldu:

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

benim çözüm anladım

Sonunda yaptığım işte işte:

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

Answer 3

elemanları taşımak için tring ediyorsanız (diyelim < li/>) bir #source gelen < ul/a #destination < ul/> için > ve taşımak yerine onları (klonlamak istiyorum) ve yine sağda sıralanabilir olması, bu çözüm bulduk: Ben ultra basit görünüyor biliyorum

$(function() { 

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

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

    }); 

, ama benim için çalıştı! :)

Answer 4

Çalıştığım nokta şu şekildedir: PS: 'marker' sürüklenecek nesnedir ve 'map', hedef kapsayıcıdır.

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