制作类似谷歌日历的拖动界面

Posted 2023-05-08

【中文标题】制作类似谷歌日历的拖动界面

【英文标题】：Making a Google-Calendar-like dragging interface

【发布时间】：2012-05-22 10:25:18

【问题描述】：

当您使用 Google 日历并想要创建一个新事件时，您可以从开始时间拖动到结束时间，这会在所需范围内创建事件。

我想使用 jQuery 为我的网站实现相同的功能。

有谁知道我可以如何做到这一点？

【参考方案1】：

基本思想是有时间“槽”元素，每个元素都指一个特定的时间（通常是 15 分钟的间隔）。每个插槽元素都有一个 onmouseup 和 onmousedown 处理程序。 mousedown 处理程序在触发时存储该插槽引用的时间并更新一个布尔变量，该变量指示是否正在发生拖动。当 mouseup 被触发时，处理程序检查是否开始拖动，如果是，则确定这是结束槽。您现在有了一个开始和结束时间，您可以从那里获取一些对话框来完成其余的预订。

演示： http://www.dstrout.net/pub/appointment.htm 该演示还包括防止文本选择的代码，因为这是拖动的“副作用”。查看代码以了解其工作原理。

【讨论】：

如果你想在拖动操作过程中显示预览，你可以使用mousemove处理程序。

如果你玩过这个演示，你会注意到一些缺点——你可以从一个较晚的时间拖到一个较早的时间，它会询问你是否想“从[较晚时间]到[较早时间]”。此外，没有突出显示，这无疑是有用的。这些留给用户作为练习。

【参考方案2】：

这是我对这个问题的看法。它以小时为单位，但很容易适应半小时或十五分钟的时间间隔。

html：

<div id="hours">
    <div class="hour">8am</div>
    <div class="hour">9am</div>
    <div class="hour">10am</div>
    <div class="hour">11am</div>
    <div class="hour">...</div>
</div>

javascript：

var dragging;
var yOnMousedown;

$('.hour').mousedown( function(e) 
    e.preventDefault();
    $(this).addClass( 'hour-highlighted' );
    dragging = true;
    yOnMousedown = e.pageY;
 );​​​

$(document).mouseup( function(e) 
    e.preventDefault();
    dragging = false;
 );

$(document).mousemove( function(e) 
    if( dragging ) 
        e.preventDefault();
        $('.hour').each( function() 
            var top = $(this).offset().top;
            var bottom = top + $(this).height();
            if( bottom > yOnMousedown && e.pageY > top )
                $(this).addClass( 'hour-highlighted' );
            else
                $(this).removeClass( 'hour-highlighted' );
         );
    
 );

jsfiddle 在这里：http://jsfiddle.net/cv9LM/

【参考方案3】：

类似于 mousedown、mousemove 和 mouseup 的东西

var dragging = false
$(someelement).mousedown(function()
    dragging = true;
);

$(body).mousemove(function()
    // In here you want to do all of the dragging functionality. Try using body,
    // window, document etc to see what works the best.
);

$(body).mouseup(function()
    dragging = false;
    /* If you use an element here instead of body, document or window, when the
     user moves outside the element and lets go of the mousebutton, the dragging
     won't stop. */
);