javascript - 防止可拖动的 div 相互遮挡

Question

我正在为我的网站开发一个拖放日历。用户可以将现有的日期块拖动到不同的时间和日期。我遇到的问题是找到一种相对简单的方法来确定当块被丢弃时（在鼠标向上事件中）该块是否部分或完全遮盖了现有的日期块，在这种情况下块应该移动回到它的鼠标按下位置。基本上我需要找到一种方法来映射容器 div 内的所有可用空闲区域（即所有未定位日期块的区域），并且如果整个拖动的 div 不超过这个然后允许放置，否则将其移回鼠标按下的位置。非常感谢任何想法。这是一个jsFiddle，您可以在其中看到我到目前为止所拥有的内容。和代码：

  $('.date').resizable({handles: 's', containment: 'parent'});
  $('.date').draggable({containment: 'parent'});

  $('.date').mousedown(function(){ 

        $(this).css('z-index','1');
    });

   $('.date').mouseup(function(){

   $(this).css('z-index','0');

      var leftPosAM = Number($(this).css('left').slice(0,-2));
      var weekBlock =  Math.round(leftPosAM/100)*100;

      $(this).css('left',(weekBlock) + "px")
 });