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

Just＆＃34;作弊＆＃34;稍微通过一点点改变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/

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

1 个答案: