使用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文本被拖動時才移動div .calendar容器。 當.calendar-container中的任何其他div都被拖動（.month-text除外）時，我不想拖動.calendar-container。 我正在使用此插件的最新版本來利用drag事件。

Answer 1

一個更簡單的方法是使用：

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

您將需要jQuery UI插件中的“可拖動”交互，此處的文檔可供參考： http : //jqueryui.com/demos/draggable/