在拖动一个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/