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

Question

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

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

有谁知道我怎么能做到这一点？

Answer 1

基本思想是有时间“槽”元素，每个元素都指一个特定的时间（通常是 15 分钟间隔）。每个插槽元素都有一个 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在这里：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. */
});