使用jQueryUI进行导航-拖放：将方块放在中间，然后执行

我正在尝试复制在以下位置找到的功能： 使用jquery拖放

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

第二个问题是，我需要让这些框围绕导航执行区域，如上面的示例所示

我的当前代码：

谢谢

JS代码（来自JS FIDDLE）

$（函数（）{
//有画廊和垃圾桶
var$gallery=$（“#gallery”），
$trash=$（“#trash”）；
//让库项目可以拖动
$（“li”，$gallery）。可拖动({
取消：“a.ui-icon”，//单击图标不会启动拖动
revert:“invalid”//未删除时，项目将恢复到其初始位置
遏制：“文件”，
助手：“克隆”，
光标：“移动”
});
//让垃圾可以放下，接受画廊的物品
$trash.dropable({
接受：“画廊>李”，
activeClass：“ui状态突出显示”，
drop：函数（事件、用户界面）{
deleteImage（ui.draggable）；
}
});
//让画廊也可以放下，接受垃圾中的物品
$gallery.droppable({
接受：“#垃圾李”，
activeClass：“自定义活动状态”，
drop：函数（事件、用户界面）{
可回收图像（ui.draggable）；
}
});
//图像删除功能
var recycle_icon=“”；
函数deleteImage（$item）{
$item.fadeOut（函数（）{
var$list=$（$ul'，$trash）.长度？
$（“ul”，美元垃圾）：
$（“
”）。附加到（$trash）；
$item.find（“a.ui-icon-trash”）.remove（）；
$item.append（回收图标）.appendTo（$list）.fadeIn（函数（）{
$item
.animate（{宽度：“48px”}）
.查找（“img”）
.animate（{高度：“36px”}）；
});
});
}
//图像循环功能
功能回收年龄（$item）{
$item.fadeOut（函数（）{
$item
.find（“a.ui-icon-refresh”）
.删除（）
(完)
.css（“宽度”，“96px”）
.查找（“li”）
.css（“高度”，“96px”）
(完)
.appendTo（$gallery）
.fadeIn（）；
});
}
//通过事件委派解决图标行为
$（“ul.gallery>li”）。单击（功能（事件）{
变量$item=$（此），
$target=$（event.target）；
如果（$target.is（“a.ui-icon-trash”））{
删除图像（项目）；
}else if（$target.is（“a.ui-icon-zoomin”））{
viewLargerImage（$target）；
}else if（$target.is（“a.ui-icon-refresh”））{
回收年龄（项目）；
}
返回false；
});
});

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

---

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

谢谢，为什么它在删除h5标记时要删除它？你需要修改DeleteImage函数，你需要设置文本动画并使其更小以适应更小的框谢谢，为什么它在删除h5标记时要删除它？你需要修改DeleteImage函数，您需要设置文本动画，并将其缩小以适合较小的框

$(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;
});
});

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