Question

我有一个类似日历的div结构，如下所示：

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

我需要做的是允许仅在给定的类值中拖动p元素与父ID值相比。例如，我只能根据父ID值=“月”在同一个月内移动class =“month”的p个元素 - 我不能将元素移动到不同的月份。同样适用于和;我只能分别在当前一周或当前季度内移动。我可以在同一个父div id =“quarter”内任意移动四分之一p元素，但不能在该区域之外移动它。

感谢。

Answer 1

您可以将div（月，年，...）设置为可放置，并在执行包含选项接受时限制可放弃的div接受特定的可拖动div。

您可以尝试：

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

以下是API Documentation

您还可以尝试范围选项，这是另一种选择。为此，您需要为draggable和droppable设置相同的范围。请参阅以下API以设置DROPPABLE和DRAGGABLE的范围。

jQuery Droppable仅在匹配的父ID中

1 个答案: