使用 jQuery 拖动包含 div 的选择子项时拖动包含 div

Question

考虑以下 HTML 结构：

<div class="calendar-container">
    <div class="month-heading-wrapper">
        <div class="month-text">
            <p>Some text would go here</p>
        </div>
        <div class="something-else">
            <p>When this is clicked on and dragged, it SHOULD NOT move anything</p>
        </div>
    </div>
</div>

使用以下 JavaScript（使用 jQuery）：

$('.calendar-container .month-heading-wrapper .month-text').unbind();

    $('.calendar-container .month-heading-wrapper .month-text').bind('drag', function(event){

 var offset = $('.calendar-container').offset();

 $('.calendar-container').css({
          'top': (offset.top + event.pageY) + 'px',
          'left': (offset.left + event.pageX) + 'px'
    });

});

我的目标是仅在拖动 div .month-text 时移动 div .calendar-container。当 .calendar-container 中的任何其他 div 被拖动时，除了 .month-text 之外，我不想拖动 .calendar-container。我正在使用最新版本的this 插件来利用拖动事件。

Answer 1

一个更简单的方法是使用：

$('.calendar-container').draggable({handle:'.calendar-container .month-heading-wrapper .month-text'});

您需要 jQuery UI 插件中的“可拖动”交互，此处的文档供参考：http://jqueryui.com/demos/draggable/