Question

以下显示我尝试向段落添加两个可拖动的 stop 事件处理程序。只有第二个会开火...我怎么才能同时开火？

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

我正在尝试创建两个库并堆叠它们，都将拖放功能添加到底层元素。

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

将多个draggable / droppable附加到一个元素

1 个答案: