jquery ui sortables連接列表：複製項目

Question

我有兩個列表，我希望他們都是可排序的，並希望能夠將項目從list1複製（拖動）到list2，反之亦然。

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

就是我想要的，但項目被移動，不可複製。 我用draggables和droppables做了一些實驗，但我無法開始工作讓他們排序。例如：http://jsfiddle.net/tunafish/dvXmf/

Answer 1

確定這裏是我的應用程序;兩個圖像列表，可排序，您可以從連接列表中複製。
如果某個項目已存在於目標中，則該項目已被禁用。
希望對大家有用的人......

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對此的回答對我來說非常有幫助。

我會提出一個建議;如果列表正在不斷變化，則由於將事件重新註冊到所有子對象上，mousedown事件似乎被稱爲無數次。它可能有點混亂，但我首先添加了一個解除綁定，以確保mousedown事件只被調用一次。

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

到

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