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