如何修改 jquery photo-manager 脚本以使用更多框答案

【问题标题】：how to modify jquery photo-manager script to use more boxes如何修改 jquery photo-manager 脚本以使用更多框
【发布时间】：2023-03-24 00:19:01
【问题描述】：

我想将图像绘制到几个盒子而不是垃圾箱。我试过了，但我很难解决这个问题。有没有人有想法，如何处理这个问题？我是这样尝试的：

修改了html：

<div>
<div id="drop1" class="drop">
 <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Box 1</h4>
</div>

<div id="drop2" class="drop">
 <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Box 2</h4>
</div>
</div>

droppable 方法：

// let the trash be droppable, accepting the gallery items
  $dropp.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: ".drop li",
  activeClass: "custom-state-active",
  drop: function(event, ui) {
    recycleImage(ui.draggable);
  }
});

jsFiddle

【问题讨论】：

标签： javascript jquery droppable jquery-ui-droppable

【解决方案1】：

为什么没人看这个？？？我自己又找到了一个解决方案，但事实证明并不令人满意。现在可以绘制到每个框并返回，但不能在框之间绘制。

$(function() {
// there's the gallery and the trash
  var $gallery = $("#gallery"),
  $dropp = $(".drop");
// 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
  $('.drop').droppable({
    accept: "#gallery > li",
    activeClass: "ui-state-highlight",
    drop: function(event, ui) {
     deleteImage(ui.draggable,$(this));
    }
  });
// let the gallery be droppable as well, accepting items from the trash
 $gallery.droppable({
  accept: ".drop 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='Rausnehmen' class='ui-icon ui-icon-refresh'>Löschen</a>";
   function deleteImage(item,droppp) {
     item.fadeOut(function() {
       var $list = $("ul", droppp).length ?
       $("ul", droppp) :
       $("<ul class='gallery ui-helper-reset'/>").appendTo(droppp);
       item.find("a.ui-icon-trash").remove();
       item
       .appendTo($list)
       .fadeIn(function() {
         item
         .animate({ width: "48px" })
         .find("img")
         .animate({ height: "36px" });
       });
     });
    }
    function recycleImage($item) {
    $item.fadeOut(function() {
      $item
      .find("a.ui-icon-refresh")
      .remove()
      .end()
      .css("width", "96px")
      .find("img")
      .css("height", "72px")
      .end()
      .appendTo($gallery)
      .fadeIn();
     });
    }
 // image preview function, demonstrating the ui.dialog used as a modal window
  function viewLargerImage($link) {
   var src = $link.attr("href"),
   title = $link.siblings("img").attr("alt"),
   $modal = $("img[src$='" + src + "']");
   if($modal.length) {
     $modal.dialog("open");
   } else {
  var img = $("<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />")
    .attr("src", src).appendTo("body");
    setTimeout(function() {
    img.dialog({
      title: title,
      width: 400,
      modal: true
    });
    }, 1);
   }
  }
// 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);
   }
   return false;
 });
});

【讨论】：