jquery ui sortables collega le liste: copia elementi

Question

Ho due elenchi, voglio che siano entrambi ordinabili e che vogliano essere in grado di copiare (trascinare) elementi da lista1 a lista2 e viceversa.

http://jqueryui.com/demos/sortable/#connect-lists

è quello che voglio, ma gli elementi vengono spostati, non copiato. Ho fatto alcuni esperimenti con draggable e droppable, ma non riesco a lavorare per tenerli ordinabili. Ad esempio: http://jsfiddle.net/tunafish/dvXmf/

Answer 1

OK, ecco la mia app; due elenchi di immagini, ordinabili e che puoi copiare dalla lista connessa.
Se un oggetto esiste già nella destinazione è disabilitato.
Speriamo che utile a qualcuno ...

JSFiffle qui: http://jsfiddle.net/tunafish/VBG5V/

CSS:

.page { width: 410px; padding: 20px; margin: 0 auto; background: darkgray; } 
.album { list-style: none; overflow: hidden; 
    width: 410px; margin: 0; padding: 0; padding-top: 5px; 
    background: gray; 
} 
.listing { margin-bottom: 10px; } 
.album li { float: left; outline: none; 
    width: 120px; height: 80px; margin: 0 0 5px 5px; padding: 5px; 
    background: #222222; 
} 
li.placeholder { background: lightgray; } 

JS:

$("ul, li").disableSelection(); 

$(".album, .favorites").sortable({ 
    connectWith: ".album, .favorites", 
    placeholder: "placeholder", 
    forcePlaceholderSize: true, 
    revert: 300, 
    helper: "clone", 
    stop: uiStop, 
    receive: uiReceive, 
    over: uiOver 
}); 


$(".album li").mousedown(mStart); 

var iSender, iTarget, iIndex, iId, iSrc, iCopy; 
var overCount = 0; 

/* everything starts here */ 
function mStart() { 
    // remove any remaining .copy classes 
    $(iSender + " li").removeClass("copy"); 

    // set vars 
    if ($(this).parent().hasClass("listing")) { iSender = ".listing"; iTarget = ".favorites"; } 
    else { iSender = ".favorites"; iTarget = ".listing"; } 
    iIndex = $(this).index(); 
    iId  = $(this).attr("id"); 
    iSrc = $(this).find("img").attr("src"); 
    iCopy = $(iTarget + " li img[src*='" + iSrc + "']").length > 0; // boolean, true if there is allready a copy in the target list 

    // disable target if item is allready in there 
    if (iCopy) { $(iTarget).css("opacity","0.5").sortable("disable"); } 
} 

/* when sorting has stopped */ 
function uiStop(event, ui) { 
    // enable target 
    $(iTarget).css("opacity","1.0").sortable("enable"); 

    // reset item vars 
    iSender = iTarget = iIndex = iId = iSrc = iCopy = undefined; 
    overCount = 0; 

    // reinit mousedown, live() did not work to disable 
    $(".album li").mousedown(mStart); 
} 

/* rolling over the receiver - over, out, over etc. */ 
function uiOver(event, ui) { 
    // only if item in not allready in the target 
    if (!iCopy) {     
     // counter for over/out (numbers even/uneven) 
     overCount++; 
     // if even [over], clone to original index in sender, show and fadein (sortables hides it) 
     if (overCount%2) { 
      if (iIndex == 0) { ui.item.clone().addClass("copy").attr("id", iId).prependTo(iSender).fadeIn("slow"); } 
      else { ui.item.clone().addClass("copy").attr("id", iId).insertAfter(iSender + " li:eq(" + iIndex + ")").fadeIn("slow"); } 
     } 
     // else uneven [out], remove copies 
     else { $(iSender + " li.copy").remove(); } 
    } 
    // else whoooooo 
} 

/* list transfers, fix ID's here */ 
function uiReceive(event, ui) { 
    (iTarget == ".favorites") ? liPrefix = "fli-" : liPrefix = "lli-"; 
    // set ID with index for each matched element 
    $(iTarget + " li").each(function(index) { 
     $(this).attr("id", liPrefix + (index + 1)); // id's start from 1 
    }); 
} 

HTML:

<div class="page"> 

    <div class="container"> 
     <h2>Photo Album</h2> 
     <ul class="listing album"> 
      <li id="li-1"><img src="tn/001.jpg" /></li> 
      <li id="li-2"><img src="tn/002.jpg" /></li> 
      <li id="li-3"><img src="tn/003.jpg" /></li> 
      <li id="li-4"><img src="tn/004.jpg" /></li> 
      <li id="li-5"><img src="tn/005.jpg" /></li> 
     </ul> 
    </div> 

    <div style="clear:both;"></div> 

    <div class="container"> 
     <h2>Favorites</h2> 
     <ul class="favorites album"> 
      <li id="fli-1"><img src="tn/001.jpg" /></li> 
      <li id="fli-2"><img src="tn/002.jpg" /></li> 
      <li id="fli-3"><img src="tn/010.jpg" /></li> 
     </ul> 
    </div> 

</div> 

Answer 2

Devo dire che la risposta di FFish a questo è stata incredibilmente utile per me.

Farei un suggerimento; se le liste vengono costantemente cambiate, l'evento "mouse" sembra essere chiamato più volte a causa della registrazione dell'evento su tutti gli oggetti figlio. Potrebbe essere un po 'un kludge, ma ho aggiunto per primo un unbind per assicurarmi che l'evento Mousedown venga chiamato solo una volta.

$(".album li").mousedown(mStart); 

a

$(".album li").unbind('mousedown', mStart).mousedown(mStart);