CODEWITHSUNDEEP
jquerydraggabledroppable
zedkineece
zedkineece

Reputation: 105

jQuery Droppable only within matching parent ID

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.

Upvotes: 0

Views: 459

Answers (1)

MrNobody007
MrNobody007

Reputation: 1837

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.

Upvotes: 1

Related Questions