将多个可拖放/放置到一个元素

问题描述：

下面显示了我尝试将两个可拖动的停止事件处理程序添加到段落。只有第二个会开火...我怎么能两个都开火？将多个可拖放/放置到一个元素

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

我想创建两个库并将它们堆叠起来，两者都向底层元素添加拖放功能。

答

你可以添加一种内部工厂般的功能，如：

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

这看起来正是我需要堆处理！ – Quaternion 2011-02-09 18:56:55

将多个可拖放/放置到一个元素

相关推荐