複数のdraggable/droppableを1つの要素にアタッチする

以下は、2つのdraggable stopイベントハンドラを段落に追加しようとしたところです。二人目だけが発砲する...どうすれば二人とも発砲することができますか？複数のdraggable/droppableを1つの要素にアタッチする

<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js" type="text/javascript"></script> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       var dragg1 = { 
        stop: function(event, ui){alert('stop dragg1')} 
       }; 
       var dragg2 = { 
        stop: function(event, ui){alert('stop dragg2')} 
       }; 
       $(".makeDraggable").draggable(dragg1); 
       $(".makeDraggable").draggable(dragg2); 
      }); 
     </script> 
    </head> 
    <body> 
     <h1>Multi Handler Test</h1> 
     <div class="makeDraggable">Hello</div> 
    </body> 
</html>

私は2つのライブラリを作成し、それらをスタックしようとしています。どちらも、基本となる要素にドラッグアンドドロップ機能を追加しようとしています。

出典

2011-02-09 Quaternion

あなたはこのように、内部の工場のような機能の並べ替えを追加することができます。

$('.makeDraggable') 
    .data('draggableStop', (function(){ 
     var fns = []; 
     return { 
      add: function(fn){ 
       fns.push(fn); 
      }, 
      stop: function(event, ui){ 
       for(var i=0; i<fns.length; i++) { 
        fns[i](event, ui); 
       } 
      } 
     }; 
    })()) 
     .draggable({ stop: $('.makeDraggable').data('draggableStop').stop }); 

$('.makeDraggable').data('draggableStop').add(function(){ alert('1'); }); 
$('.makeDraggable').data('draggableStop').add(function(){ alert('2'); });

作業バージョン：http://jsfiddle.net/zezUA/

出典

2011-02-09 18:19:37 davin

これは私がハンドラをスタックする必要が正確に何のように見えます！ – Quaternion

複数のdraggable/droppableを1つの要素にアタッチする

答えて

関連する問題