Drag a containing div when dragging select children of the containing div with jQuery

Question

Consider the following HTML structure:

<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>

With the following JavaScript (using 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'
    });

});

My goal is to move the div .calendar-container ONLY when the div .month-text is being dragged. I don't want to drag .calendar-container when any other div inside .calendar-container is being dragged except for .month-text. I am using the latest version of this plugin to utilize the drag event.

Answer 1

A much simpler method would be to use:

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

You'll need the "Draggable" interaction in the jQuery UI Plugins, documentation here for reference: http://jqueryui.com/demos/draggable/