Faites glisser un contenant div lors du déplacement des enfants choisis du contenant div avec jQuery

Question

Tenir compte de la structure HTML suivant:

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

Avec le code JavaScript suivant (en utilisant 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' 
    }); 

});

Mon but est de déplacer le conteneur div .calendar UNIQUEMENT lorsque le texte .month est déplacé. Je ne veux pas faire glisser .calendar-container quand tout autre div à l'intérieur de .calendar-container est déplacé sauf pour .month-text. J'utilise la dernière version du plugin this pour utiliser l'événement drag.

Answer 1

Une méthode beaucoup plus simple serait d'utiliser:

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

Vous aurez besoin de l'interaction "Draggable" dans le plug-ins jQuery UI, documentation pour référence: http://jqueryui.com/demos/draggable/