仅在匹配的父ID中可删除jQuery

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>

​

我需要做的是，相对于父ID值，只允许在给定的类值中拖动p元素。例如，我只能根据父ID值= " month“在同一个月内移动p元素，其中class=”月份“不能移动到其他月份。同样的情况也适用于和；我只能分别在当前周或当前季度内移动。我可以将季度p元素移动到同一个父id=“季度”内的任何地方，但不能将其移出该季度。

谢谢。

Answer 1

你可以做div(月，年，.)在执行包含选项时，接受来限制可下垂的div接受特定的可拖的div。

你可以试试：

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

这是API文档

您还可以尝试范围选项，这是要接受的附加选项。为此，您需要为可拖放和可下垂设置相同的作用域。请参考下面的API来设置可下垂和拖曳的范围。