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

Question

例如，我有三个可拖动的元素，如下所示：

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

如果.main被拖动，我们也需要拖动.followers。不仅是位置，而且还触发所有拖放事件，如开始，拖动，停止。注意，跟随者将是正常的可拖放元素。当.main被拖动时，他们应该像在同一个可拖动元素中一样移动，从而触发所有.follower拖放元素的事件。

这是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.
});

这里是jsfiddle http://jsfiddle.net/9x56E/1/

Answer 1

只需稍微“欺骗”一下HTML就可以了，就像这样：

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

稍微调整一下CSS：

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

然后jQuery：

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

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

编辑：对不起，错过了必须触发可拖事件的部分.

这个怎么样：

$(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
    });

});

这里有一个小提琴：http://jsfiddle.net/Niffler/6TZp3/