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

当您使用Google日历并希望创建新事件时，可以从开始时间拖动到结束时间，这将在所需范围内创建事件

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

---

有人知道我如何做到这一点吗？

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

演示：

---

演示还包括防止文本选择的代码，因为这是拖动的“副作用”。查看代码以了解其工作原理。

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

---

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

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>

---

jsfiddle here:

如果您想在拖动操作期间显示预览，可以使用mousemove处理程序。如果您一直在玩演示，您会注意到一些缺点-您可以从较晚的时间拖动到较早的时间，它会询问您是否要“设置从[晚些时候]到[早些时候]的约会”。此外，没有突出显示，这无疑是有用的。这些都留给用户作为练习。该死，演示链接不再工作。

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' );
        } );
    }
} );