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 draggable对象会帮助你

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'));
    }
  });
}

（jQuery） - 单击以拖动图像但不删除原始图像

3 个答案: