防止可拖动的div相互遮挡

时间:2013-11-10 13:31:15

标签: javascript jquery html jquery-ui

我正在为我的网站开发拖放日历。由此,用户可以将现有日期块拖动到不同的时间和日期。我遇到的问题是找到一种相对简单的方法来确定当块被丢弃时(在鼠标向上事件中)块是否部分或完全遮蔽现有的日期块,在这种情况下块应该移动回到它的鼠标向下位置。基本上我需要找到一种方法来映射容器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")
 }); 

0 个答案:

没有答案