javascript - 将图像从一个 div 拖放到另一个 div

Question

我想将一些图像从 div 拖到另一个 div...我有一个 div 容器，其中有 5 个 div，在这 5 个 div 中是一些 png。我需要的是将这些 png 从第一个 div 一个一个地拖到 id="dropspot"的 div，然后单击“下一步按钮”更改为容器中的第二个 div 并清除 drospot div，依此类推直到第 5 分区

我已经尝试了一些东西，但不是我需要的:(这些功能使所有图像都可以拖动，我只需要容器内的图像可以拖动。

这是一个 fiddle :http://jsfiddle.net/ygaw2/7/

和一些代码:

$(function() {
    $( "#container img" ).draggable();
    ({
    containment: "#container",    
    revert: "invalid",
    helper: "clone"

    });
    $( "#dropspot" ).droppable({

      tolerance: 'fit',

      drop: function( event, ui ) {


      }
    });
  });

Answer 1

试试这个解决方案:http://jqueryui.com/droppable/#photo-manager 在我看来，就像你想让它工作一样。

在 droppable 回调中你可以清除 droppable 元素的内容。

编辑

你需要的一切都在我链接的那个例子中+一件事:

$( "#container img" ).draggable({
    containment: "#container",    
    revert: "invalid",
    helper: "clone"

    });

删除();可拖动后