Jquery ui sortables listeleri bağlamak: kopya öğeleri İki listeleri var

Question

, ben sıralanabilir olmak her ikisi istiyor ve bunun tersi List2 ve Liste1 den (sürükle) öğeleri kopyalamak mümkün istiyorum.

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

ne istiyorum mı, ancak öğeler kopyalanamaz, değil taşınır. Sürüklenebilir ve düşülebilir birtakım birkaç deneme yaptım, ancak bunları sıraya dizmek için çalışamıyorum. Örneğin: Burada http://jsfiddle.net/tunafish/dvXmf/

Answer 1

Tamam benim uygulaması; iki görüntü listesi, sıralanabilir ve bağlı listeden kopyalayabilirsiniz.
Hedefte bir öğe zaten varsa, devre dışı bırakılır. Birine Umarım yararlı
... Burada

JSFiffle: 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

FFish'in bunun cevabının bana inanılmaz derecede yardımcı olduğunu söylemeliyim.

Bir öneri yapmak istiyorum; Listeler sürekli olarak değiştiriliyorsa, olayın tekrar tekrar kaydedilmesi nedeniyle tüm alt nesnelerdeki olayların defalarca çağrılması gibi görünüyor. Bir kludge biraz olabilir, ama ben mousedown olayı sadece bir kez çağrıldığından emin olmak için ilk önce bir unbind ekledim.

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

için

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