jQueryUIのDraggableで画像の複製を自由に移動させたい

jQueryUIのDraggableを使って、家具の配置シュミレーターを作りたいと思っています。
仕様としては、家(div)の中に家具一覧があり、その中の椅子(画像)をドラッグすると家の中のみ自由に配置できるものを想定しています。
配置が終わった後も家具一覧には椅子(画像)があり、家の中に何個でも椅子(画像)を複製して配置できるようにしたいです。

試行錯誤して、椅子(画像)をドラッグして何個でも複製できるようにはなったのですが、複製した画像が横並びになってしまい、ドラッグしても移動ができない状態になってしまいました…

複製した画像を好きな位置に移動できるようにするには、どうしたらいいでしょうか？
ソースは下記になります。ご指摘よろしくお願いします。

###js

jQuery( function() {
    jQuery( '.kagu' ) . draggable( {
        containment: '.ie',
        scroll: false,
        opacity: 0.5,
        helper: 'clone',
    } );
    $('.ie').droppable({
    accept: '.kagu',
    drop: function(event, ui) {
        ui.draggable.clone().appendTo(this);
    },
});
} );

###css

.ie {
    width: 700px;
    height: 500px;
    padding: 5px;
    margin: 0;
    border-style: dashed;
    border-radius: 10px;
}

###html

<div class="ie ui-widget-content">
<img src="img/isu.png" class="kagu">
</div>

行動規範の内容に同意します

回答1件

ベストアンサー

おそらく

javascript
1  $('.ie').droppable({
2    "accept": '.kagu',
3    "drop": function(event, ui) {
4      $(this).prepend(ui.helper.clone().css({opacity:1}));
5    },
6  });
7

でいけると思いますが、これだとオリジナルからコピーがわかれるだけで
オリジナルの移動もコピー後のオブジェクトの移動もできません。
もう少し仕様をよく検討されたほうが良いと思います

たとえばこう

javascript
1$(function(){
2  $(document).on('dblclick','.kagu',function(){
3    $(this).after($(this).clone());
4    $('.kagu').draggable( {
5      "containment": '.ie',
6      "opacity": 0.5,
7    });
8  });
9  $('.kagu').css({position:"absolute"}).draggable( {
10    "containment": '.ie',
11    "opacity": 0.5,
12  });
13  $('.ie').droppable({
14    "accept": '.kagu',
15    "drop": function(e, ui) {
16      ui.draggable.css({position:"absolute"})
17    },
18  });
19});
20