2011-02-09 82 views
0

下面顯示了我嘗試將兩個可拖動的停止事件處理程序添加到段落。只有第二個會開火...我怎麼能兩個都開火?將多個可拖放/放置到一個元素

<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> 

我想創建兩個庫並將它們堆疊起來,兩者都向底層元素添加拖放功能。

回答

1

你可以添加一種內部工廠般的功能,如:

$('.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/

+0

這看起來正是我需要堆處理! – Quaternion 2011-02-09 18:56:55