Question

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

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

有没有人知道如何才能做到这一点？

Answer 1

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

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

Answer 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 here：http://jsfiddle.net/cv9LM/

Answer 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. */
});

制作类似Google-Calendar的拖动界面

3 个答案: