2

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

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

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

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

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

0

2 件の回答 2

1

追記:結局追加した要素に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"/>

4
  • idは私も疑ったんですが、classにしてみてもダメでした。
    – kotatsu
    Commented 2015年2月25日 0:01
  • @kotatsu 確かに…うまくいくと思ったのは元からある要素で試していたようです…。あとDraggableが素だとスマホに対応していないのも追記したほうがいい気がしてきました。
    – unarist
    Commented 2015年2月25日 4:59
  • @kotatsu class にして、かつ event bubbling を使ってみました。動きますでしょうか?
    – unarist
    Commented 2015年2月25日 5:56
  • 素晴らしい。できてますね。そしてオシャレ。
    – kotatsu
    Commented 2015年2月25日 6:54
0

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

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

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

$$(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();
  });

});

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。