在拖动一个jqueryUI可拖动元素时，触发对其他多个元素的拖动

Question

I have for example three draggable elements like follows:

<div class="draggable main">Main</div>
<div class="draggable followers">Follower</div>
<div class="draggable followers">Follower2</div>

If .main is dragged, We need .followers to be dragged too. Not just positions but also triggering all the draggable events in them like start, drag, stop. Note, the followers will be normal draggable elements. Just when .main is dragged they should be moving with it as if they are in the same draggable element triggering all the .follower draggable elements' events too.

Here is the JS

jQuery('.draggable.followers').draggable();
jQuery('.draggable.main').draggable({
    // If .main is dragged, We need .followers to be dragged too. Not just positions but also triggering all the draggable events in them like start, drag, stop.
});

Here is the jsfiddle http://jsfiddle.net/9x56E/1/

Answer 1

Just "cheat" a little by shuffling the HTML around a little like this:

<div class="special-draggable">
    <div class="main">Main</div>
    <div class="draggable followers">Follower</div>
    <div class="draggable followers">Follower2</div>
</div>

Adjust the CSS a little:

.draggable{
    border: 1px solid red;
    width: 60px;
    height: 60px;
}
.main{
    width: 300px;
    border: 1px solid red;
    height: 60px;
}

And then the jQuery:

jQuery('.draggable.followers').draggable();
jQuery('.special-draggable').draggable();

http://jsfiddle.net/Niffler/9x56E/2/

EDIT : Sorry, missed the part about it having to trigger the draggable events...

How about this:

$(function() {
    $('.draggable.followers').draggable();
    $('.draggable.main').draggable();

    /* trigger dragstart on followers when main is dragged */
    $('.draggable.main').on('dragstart', function() {
        $('.draggable.followers').each(function() {
            $(this).trigger('dragstart');
        });
    });

    /* trigger drag on followers when main is dragged and adjust position */
    $('.draggable.main').on('drag', function() {
        var maintop = $(this).css('top');
        var mainleft = $(this).css('left');

        $('.draggable.followers').each(function() {
            $(this).trigger('drag');
            $(this).addClass('ui-draggable-dragging');
            $(this).css('margin-left', mainleft);
        });

        $('.draggable.followers:first').css('margin-top', maintop);
    });

    /* trigger dragstop on followers when main is dragged and adjust position */
    $('.draggable.main').on('dragstop', function() {
        var maintop = $(this).css('top');
        var mainleft = $(this).css('left');

        $('.draggable.followers').each(function() {
            $(this).trigger('dragstop');
            $(this).removeClass('ui-draggable-dragging');
            $(this).css('margin-left', mainleft);
        });

       $('.draggable.followers:first').css('margin-top', maintop);
    });


    /* test different actions on .followers */
    $('.draggable.followers').on('dragstart', function() {
        // do something
    });

    $('.draggable.followers').on('drag', function() {
        // do something
    });

    $('.draggable.followers').on('dragstop', function() {
        // do something
    });

});

Here's a fiddle: http://jsfiddle.net/Niffler/6TZp3/