Attaching multiple draggable/droppable to one element
The following shows my attempt to add two draggable stop event handlers to a paragraph. Only the second will fire... How can I get both to 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 am trying to create two libraries and stack them, both add drag and drop functionality to the underlying elements.
You could add a sort of internal factory-like function, like 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/
加载中,请稍侯......
精彩评论