0

HTML

<td title='10:00 AM-wed 09-01-2013'><div style="position:relative;height:60px">
        <div style="position:absolute;top:00px;" class='entry'>Demo patient</div>
        <div style="position:absolute;top:20px;" class='entry'>New patient</div>
        <div style="position:absolute;top:40px;" class='entry'>fool patient</div>
</div></td>

图片

在此处输入图像描述

用于生成条目的 PHP

echo"<div style='position:absolute;top:".date("i", strtotime($data['time_booked']))."px;'>{$data['name']}</div>";

我做了一个简单的 jquery/php 日程安排（日历），如上所示。

如您所见，我有父 div 高度：60px（每分钟 1px）和相对位置，然后我根据其最小值定位子 div 绝对值（例如：演示患者是 10:00 所以顶部：00px，傻瓜患者是 10:40 所以它的顶部：40px）。这工作正常，除非有重叠的时间。例如，如果我同时有 2 个条目，那么两者将被放置在彼此之上。

问题我怎样才能避免这种情况？像谷歌日历一样，如果存在 2 个预订，它们会并排移动，而不是彼此重叠。

谢谢

问题解决了：

使用这个插件和下面的代码

var n=$('div.entry').overlaps().length;var vol=(100/n);var round=0;
    $('div.entry').overlaps().each(function(){
        $(this).css('left',((vol-1)*round)+'%');
        $(this).css('width',(vol-n)+'%')
        round=round+1;
    });

现在它可以完美地作为谷歌日历工作：D .. 谢谢大家

4

3 回答 3

1

我会将您的输出更改为以下内容：

<td title='10:00 AM-wed 09-01-2013'><div style="position:relative;height:60px">
    <div style="position:absolute;top:00px;"><span>Demo patient</span></div>
    <div style="position:absolute;top:20px;"><span>New patient</span><span>2nd patient at this time</span></div>
    <div style="position:absolute;top:40px;"><span>fool patient</span></div>
</div></td>

然后它们会并排漂浮

于 2013-01-08T16:57:34.417 回答
1

如果你想要一个 jquery 解决方案来检查是否有任何元素重叠，那么你可以使用这个插件brandonaaron/jquery-overlaps。您可以对每个元素进行检查以检查是否有任何重叠，然后执行将在父元素中重新定位事件的功能

于 2013-01-08T16:57:42.353 回答
0

您希望解决方案是什么？您希望这些项目彼此紧挨着放置还是相邻放置？无论如何，您可能只需要稍微调整一下您的位置，以考虑重叠的可能性。

不要使用原始时间来定位它们，而是先做重叠分辨率，看看哪些元素重叠，给它们一个相对位置，即：

(0,0)
(1,0)   (1,1)  // overlap here
(2,0)

然后将相对位置转换为像素坐标。您现在还应该知道您的列应该有多高以适合所有元素。

于 2013-01-08T16:52:12.197 回答