2

我有这个系统通过将图像项拖放到 div 中来创建所选图像的列表id="trash"。

本系统是从jquery ui页面中的照片管理器复制过来的： 链接

我要实现的是在每个图像样本中都有一个向上箭头图标，以便将其插入列表中而无需拖动它。

我已经设法附加了元素，但是在调用函数 deleteImage() 时遇到了麻烦，因此在将元素放入列表后，它会像动画一样进行动画处理。

这是该项目的JSFIDDLE

这是我到目前为止所拥有的：

$('a.quick_insert').click( function(){
  var sample = $("<li />").append($(this).closest($('li')).clone()).html();
  $(this).closest($('li')).fadeOut(function(){
    $('#trash').append(sample).fadeIn(function() {
      var $list = $( "ul", $trash ).length ?
      $( "ul", $trash ) :
      $( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );

      $sample.find( "a.ui-icon-trash" ).remove();
      $sample.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
        $sample.animate({ width: "48px" }).find( "img" ).animate({ height: "36px" });
      });

    });
  });
});

谢谢

4

1 回答 1

1

尝试更改您的代码：

// Quick Insertion
$('a.quick_insert').click( function(){
    deleteImage( $(this).parent() );
});

因此，您将通过将当前单击的容器作为元素传递来重用示例的相同功能。

演示：http: //jsfiddle.net/gqSaq/5/

编辑

为了让回收正常工作，您必须委托它的 click usin on，因为该元素是动态创建的。

代码：

// Quick Insertion
$('#gallery li').on('click', 'a.quick_insert', function () {
   deleteImage($(this).parent());
});

演示：http: //jsfiddle.net/gqSaq/6/

于 2013-09-13T11:52:19.520 回答