2014-10-02 64 views
0

我想實現一個橫幅管理系統,並計劃使用jquery Photo Manager。我目前面臨的問題是,我似乎無法獲得父映像克隆主容器上。Jquery拖放ñ照片編輯器克隆父容器上

這裏是鏈接到小提琴的codes(這基本上是從jQuery UI網站相同)

什麼我打算製作的是讓用戶從左邊拖動或添加圖像正確和用戶可以多次添加相同的圖像,但只要圖像被添加到右側,它會從左側消失。

我正在看這段代碼的解決方案,但沒有看到任何特定於該項目被移動的DOM元素的刪除。只有從DOM中刪除的項纔是圖標。

function deleteImage($item) { 
    $item.fadeOut(function() { 
     var $list = $("ul", $trash).length ? $("ul", $trash) : $("<ul class='gallery ui-helper-reset'/>").appendTo($trash); 
     $item.find("a.ui-icon-trash").remove(); 
     $item.append(recycle_icon).appendTo($list).fadeIn(function() { 
      $item.animate({ 
       width: "48px" 
      }) 
       .find("img") 
       .animate({ 
       height: "36px" 
      }); 
     }); 
    }); 
} 

有人可以幫我解釋一下。

在此先感謝。

回答

0

實際上使用jquery .clone()函數做到了這一點。我只需要做的不是傳遞元素的對象,而是通過他們的克隆與事件。

$trash.droppable({ accept: "#gallery > li", activeClass: "ui-state-highlight", drop: function (event, ui) { deleteImage(ui.draggable.clone(true)); } });

將參數設置爲true克隆,使得包括所有的活動元素的深層副本。

$("ul.gallery > li").click(function (event) { var $item = $(this), $target = $(event.target); if ($target.is("a.ui-icon-trash")) { deleteImage($item.clone(true)); } else if ($target.is("a.ui-icon-zoomin")) { viewLargerImage($target); } else if ($target.is("a.ui-icon-refresh")) { $item.remove(); } return false; });

這裏是鏈接到參考工作提琴。 Link