jQuery Droppable only within matching parent ID

Question

I have a calendar-like div structure, like the following:

<div id="year">
   <div id="quarter">
      <div id="month">
         <div id="week">
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"><p id="xmarks" class="month">X</p></div>
            <div id="day"></div>
         </div>
         <div id="week">
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"><p id="xmarks" class="month">X</p></div>
            <div id="day"><p id="xmarks" class="quarter">X</p></div>
         </div>
      </div>
      <div id="month">
         <div id="week">
            <div id="day"><p id="xmarks" class="month">X</p></div>
            <div id="day"><p id="xmarks" class="month">X</p></div>
            <div id="day"><p id="xmarks" class="quarter">X</p></div>
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"></div>
         </div>
         <div id="week">
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"><p id="xmarks" class="month">X</p></div>
            <div id="day"><p id="xmarks" class="month">X</p></div>
         </div>
      </div>
      <div id="month">
         <div id="week">
            <div id="day"></div>
            <div id="day"><p id="xmarks" class="week">X</p></div>
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"><p id="xmarks" class="month">X</p></div>
            <div id="day"><p id="xmarks" class="month">X</p></div>
         </div>
         <div id="week">
            <div id="day"><p id="xmarks" class="week">X</p></div>
            <div id="day"><p id="xmarks" class="quarter">X</p></div>
            <div id="day"><p id="xmarks" class="quarter">X</p></div>
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"><p id="xmarks" class="month">X</p></div>
            <div id="day"><p id="xmarks" class="month">X</p></div>
         </div>
      </div>
   </div>
   <div id="quarter">
      <div id="month">
         <div id="week">
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"><p id="xmarks" class="month">X</p></div>
            <div id="day"></div>
         </div>
         <div id="week">
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"><p id="xmarks" class="month">X</p></div>
            <div id="day"><p id="xmarks" class="quarter">X</p></div>
         </div>
      </div>
      <div id="month">
         <div id="week">
            <div id="day"><p id="xmarks" class="month">X</p></div>
            <div id="day"><p id="xmarks" class="month">X</p></div>
            <div id="day"><p id="xmarks" class="quarter">X</p></div>
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"></div>
         </div>
         <div id="week">
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"><p id="xmarks" class="month">X</p></div>
            <div id="day"><p id="xmarks" class="month">X</p></div>
         </div>
      </div>
      <div id="month">
         <div id="week">
            <div id="day"></div>
            <div id="day"><p id="xmarks" class="week">X</p></div>
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"><p id="xmarks" class="month">X</p></div>
            <div id="day"><p id="xmarks" class="month">X</p></div>
         </div>
         <div id="week">
            <div id="day"><p id="xmarks" class="week">X</p></div>
            <div id="day"><p id="xmarks" class="quarter">X</p></div>
            <div id="day"><p id="xmarks" class="quarter">X</p></div>
            <div id="day"></div>
            <div id="day"></div>
            <div id="day"><p id="xmarks" class="month">X</p></div>
            <div id="day"><p id="xmarks" class="month">X</p></div>
         </div>
      </div>
   </div>

What I need to do is allow the dragging of p elements only within the given class value compared to parent ID value. For instance, I can only move p elements where class="month" within the SAME MONTH based on the parent ID value = "month" - I cannot move a element to a different month. The same holds true for and ; I can only move within the current week or current quarter, respectively. I can move quarter p elements ANYWHERE within the same parent div id="quarter", but cannot move it outside that quarter.

Thanks.

Answer 1

You can make the divs(month, year,..) as droppable and while doing include option accept to restrict the droppable div's from accepting specific draggable div's.

You can try:

$( "#month1" ).droppable({ accept: ".month" });

Here is the API Documentation

You can also try scope option which is additional option to accept. For this you need to set same scope for draggable and droppable. Refer following API to set scope for DROPPABLE and DRAGGABLE.