jquery - (jQuery) - 单击以拖动图像但不删除原始图像

Question

我正在创建某种地图编辑器，我希望能够从侧边栏中单击可用的图像，它会出现在光标下方并跟随鼠标图标，所以基本上是拖动图像，但我想要原图留在原地。

我将如何在 jQuery 中实现这一点（最好）？

Answer 1

使用 jQuery UI 试试这个：

HTML：

<ul>
    <li id="draggable" class="ui-state-highlight">Your Image</li>
</ul>

<ul id="sortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>​

脚本：

$(function() {
    $( "#sortable" ).sortable({
        revert: true
    });
    $( "#draggable" ).draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
    });
    $( "ul, li" ).disableSelection();
});​

在这里，我还创建了小提琴http://jsfiddle.net/aanred/b3QFN/。您还可以在此处阅读文档http://jqueryui.com/draggable/。

Answer 2

我认为，jquery ui可拖动对象会帮助你

Answer 3

这是我的解决方案，在此示例中，我正在拖动一个 div，但您可以轻松检查 img 子项，此代码可防止放入多个项目（通过取出条件轻松修改），具有可选回调参数，以便您可以对刚刚删除的对象执行某些操作（例如从 rel 属性中读取等）

refreshDragDrop = function(dragClassName,dropDivId, callback) {
  $( "." + dragClassName ).draggable({
    connectToSortable: "#" + dropDivId,
    helper: "clone",
    revert: "invalid"
  });
  $("#" + dropDivId).droppable({
    accept: '.' + dragClassName,
    drop: function (event, ui) {
      var $this = $(this),
        maxItemsCount = 1;
      if ($this.children('div').length == maxItemsCount ){
        //too many items,just replace
        $(this).html($(ui.draggable).clone());
      } else {
        $(this).append($(ui.draggable).clone());
      }
      if (typeof callback == "function") callback($this.children('div'));
    }
  });
}