拖動一個內含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-container。當除.month-text之外的任何其他div .calendar-container中的其他div被拖動時，我不想拖動.calendar-container。我正在使用最新版本的this插件來利用拖動事件。

Answer 1

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

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

您會在這裏需要在jQuery UI的插件的「可拖動」互動，文檔，以供參考：http://jqueryui.com/demos/draggable/