Прикрепление нескольких перетаскиваемых к одному элементу - PullRequest
0 голосов
/ 09 февраля 2011

Ниже показана моя попытка добавить два перетаскиваемых обработчика событий 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>

Я пытаюсь создать две библиотеки и сложить их вместе, добавив функциональность перетаскивания в базовые элементы.

1 Ответ

1 голос
/ 09 февраля 2011

Вы можете добавить своего рода внутреннюю фабричную функцию, например:

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

...