javascript - Google カレンダーのようなドラッグ インターフェースを作成する

Question

Google カレンダーで新しい予定を作成したい場合、開始時刻から終了時刻までドラッグすると、希望の範囲に予定が作成されます。

jQuery を使用して自分のサイトに同じ機能を実装したいと考えています。

どうすればこれを達成できるか考えている人はいますか?

Answer 1

ここに問題に対する私の見解があります。時間単位で進みますが、30 分または 15 分間隔でステップを踏むのは簡単です。

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 2

基本的な考え方は、それぞれが特定の時間 (通常は 15 分間隔) を参照する時間「スロット」要素を持つことです。各スロット要素には、onmouseup および onmousedown ハンドラーがあります。mousedown ハンドラーは、トリガーされると、そのスロットによって参照される時間を格納し、ドラッグが発生しているかどうかを示すブール変数を更新します。mouseup がトリガーされると、ハンドラーはドラッグが開始されたかどうかを確認し、開始された場合は、これが終了スロットであると判断します。これで開始時間と終了時間がわかりました。そこから、残りの予約を完了するダイアログを表示できます。

デモ: http://www.dstrout.net/pub/appointment.htm
デモには、テキスト選択を防止するコードも含まれています。これは、ドラッグの「副作用」であるためです。コードをチェックして、それがどのように機能するかを確認してください。

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