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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/08/20 07:42