

jquery-uiとQuoJSを併用し「画像をドラッグで移動でき、さらに長押しで増殖する」というものを作成しています。

[code]

    <img src="img/logo.png" class="draggable" id="button3">
    
[/code]

この画像を長押しすることで

[code]

    $$('#button3').hold(function(){
     var ele = document.createElement("img");
     ele.setAttribute("src","img/logo.png");
     ele.setAttribute("class","draggable ui-draggable ui-draggable-handle");
     ele.setAttribute("id","button3");
     ele.setAttribute("style","position:relative;left:0px;top:0px;");
     document.body.appendChild(ele);
    });
    
[/code]

このQuoJSで同じ画像を追加しようとしました。  
確かに画像は追加されましたが、ドラッグも長押しもできません。


CC BY-SA 3.0
2015-02-24T09:55:42.920
7024
2015-02-25T07:37:05.480
2015-02-24T11:51:04.873
49
8234
question
jquery-ui
jquery-uiとQuoJSでドラッグできる画像の追加


※一応unaristさんの回答を参考に`on`メソッドで動くようにしておきました。が、やり方としてはunaristさんの方が色々とスマートです。

ドラッグはjQueryUIでできました。

`hold`は追加された要素には反映されないです。  
つまり動的に生成された要素には`hold`イベントが登録されていません。

[code]

    $$(document).ready(function() {
    
      // 最初の要素をドラッグ可能に
      $('.draggable').draggable();
    
      $$(document).on('hold', '.button', function() {
    
        var ele = document.createElement("img");
        ele.setAttribute("src","img/logo.png");
        ele.setAttribute("class","button3 draggable ui-draggable ui-draggable-handle");
        ele.setAttribute("style","position:relative;left:0px;top:0px;");
        document.body.appendChild(ele);
    
        // 追加された要素をドラッグ可能に
        $('.draggable').draggable();
      });
    
    });
    
[/code]


CC BY-SA 3.0
2015-02-24T14:54:18.383
7041
2015-02-25T07:37:05.480
2015-02-25T07:37:05.480
7214
7214
7024
answer


追記：結局追加した要素にholdが効いていなかったのを修正しました。

## ドラッグできるようにする

[jQueryUI の公式サンプル](http://jqueryui.com/draggable/)でもそうですが、Draggableを適用するには
`.draggable()` を呼ぶ必要があります。

また、後から追加される要素のイベントも処理する方法として `.live()` などの event bubbling
を使った手法がありますが、Draggableには使えないようです。kotatsuさんが書かれているように、要素を追加したときに再設定する必要があるでしょう。あるいは・・・

[jQuery Drag And Drop Using Live Events - Stack
Overflow](https://stackoverflow.com/a/3349395/2818869)

この方は、`mouseover` イベントを `.live()` で監視して、`.draggable()` を呼び出すという方法を採っているようです。

なお jQueryUI は標準ではタブレットなどのタッチデバイスには対応していないので、必要であれば [jQuery UI Touch
Punch](http://touchpunch.furf.com/) などを使うといいかと思います。

## holdを捕まえる

まず、同じ `id` を持つ要素が複数できるのはマズいですから、代わりに `class` を使いましょう。

加えて、追加した要素からのイベントも受け取れるように、前述の event bubbling を使います。`.live()` は jQuery1.7 以降
`.on(events, selector, handler)` に統合されているので、こちらを使います。

  * [jQuery の on() と off() を理解する - tacamy.blog](http://tacamy.hatenablog.com/entry/2013/03/03/213113)
  * [jQueryのbind/live/delegateの違いまとめ、と新API .on()の使い方 - y-kawazの日記](http://d.hatena.ne.jp/y-kawaz/20111002/1317489435)

## サンプル

要素生成は jQuery で書いてみました。追加された要素がわかりやすいように背景色を変えています。

[code]

    $(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に追加
        });
    });
[/code]

[code]

    <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"/>
[/code]


CC BY-SA 3.0
2015-02-24T15:44:33.577
7045
2015-02-25T05:54:34.480
2017-05-23T12:38:55.250
-1
8000
7024
answer