2014-10-02 30 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