追記:結局追加した要素にholdが効いていなかったのを修正しました。
ドラッグできるようにする
jQueryUI の公式サンプルでもそうですが、Draggableを適用するには .draggable()
を呼ぶ必要があります。
また、後から追加される要素のイベントも処理する方法として .live()
などの event bubbling を使った手法がありますが、Draggableには使えないようです。kotatsuさんが書かれているように、要素を追加したときに再設定する必要があるでしょう。あるいは・・・
jQuery Drag And Drop Using Live Events - Stack Overflow
この方は、mouseover
イベントを .live()
で監視して、.draggable()
を呼び出すという方法を採っているようです。
なお jQueryUI は標準ではタブレットなどのタッチデバイスには対応していないので、必要であれば jQuery UI Touch Punch などを使うといいかと思います。
holdを捕まえる
まず、同じ id
を持つ要素が複数できるのはマズいですから、代わりに class
を使いましょう。
加えて、追加した要素からのイベントも受け取れるように、前述の event bubbling を使います。.live()
は jQuery1.7 以降 .on(events, selector, handler)
に統合されているので、こちらを使います。
サンプル
要素生成は jQuery で書いてみました。追加された要素がわかりやすいように背景色を変えています。
$(function() {
$('.button').draggable();
$$(document).on('hold', '.button', function() {
// 追加した要素が分かりやすいよう、色を変える
var color = Math.random().toString(16).slice(-6);
$('<img class="button">')
.attr('src', 'http://dummyimage.com/100x100/' + color + '/fff')
.draggable() // ドラッグ可能にして...
.appendTo('body'); // bodyに追加
});
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/quo.js/2.3.6/quo.min.js"></script>
<img src="http://dummyimage.com/100x100/8c8c8c/fff" class="button"/>