javascript - Attaching multiple draggable/droppable to one element -
the following shows attempt add 2 draggable stop event handlers paragraph. second fire... how can both fire?
<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> i trying create 2 libraries , stack them, both add drag , drop functionality underlying elements.
you add sort of internal factory-like function, this:
$('.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'); }); working version: http://jsfiddle.net/zezua/
Comments
Post a Comment