1

我正在尝试复制以下功能：http ://carbonstudio.co.uk 使用 jquery 拖放。

下面你会发现我现在的位置。我最初面临的两个问题是如何更改将列表项拖入导航执行框时发生的情况，使其更改为公司徽标（或任何内容），然后重定向到新页面。

第二个问题是我需要让这些框像上面的示例一样绕过导航执行区域。

我目前的代码：http: //jsfiddle.net/elogicmedia/GG5EL/7/

谢谢

JS 代码（来自 JS FIDDLE）

$(function() {
// there's the gallery and the trash
var $gallery = $( "#gallery" ),
  $trash = $( "#trash" );

// let the gallery items be draggable
$( "li", $gallery ).draggable({
  cancel: "a.ui-icon", // clicking an icon won't initiate dragging
  revert: "invalid", // when not dropped, the item will revert back to its initial position
  containment: "document",
  helper: "clone",
  cursor: "move"
});

// let the trash be droppable, accepting the gallery items
$trash.droppable({
  accept: "#gallery > li",
  activeClass: "ui-state-highlight",
  drop: function( event, ui ) {
    deleteImage( ui.draggable );
  }
});

// let the gallery be droppable as well, accepting items from the trash
$gallery.droppable({
  accept: "#trash li",
  activeClass: "custom-state-active",
  drop: function( event, ui ) {
    recycleImage( ui.draggable );
  }
});

// image deletion function
var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";
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" });
    });
  });
}

// image recycle function
function recycleImage( $item ) {
  $item.fadeOut(function() {
    $item
      .find( "a.ui-icon-refresh" )
        .remove()
      .end()
      .css( "width", "96px")
      .find( "li" )
        .css( "height", "96px" )
      .end()
      .appendTo( $gallery )
      .fadeIn();
  });
}


// resolve the icons behavior with event delegation
$( "ul.gallery > li" ).click(function( event ) {
  var $item = $( this ),
    $target = $( event.target );

  if ( $target.is( "a.ui-icon-trash" ) ) {
    deleteImage( $item );
  } else if ( $target.is( "a.ui-icon-zoomin" ) ) {
    viewLargerImage( $target );
  } else if ( $target.is( "a.ui-icon-refresh" ) ) {
    recycleImage( $item );
  }

  return false;
});
});
4

1 回答 1

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

你不能在删除后添加另一个函数调用吗？

于 2013-05-08T21:57:14.970 回答