0

私は現在、毎日の予約システムと同様に機能する Web ベースのアプリケーションの開発に携わっています。このページには、スタッフのメンバーごとに 3 つの個別の垂直列 (ページの 100% の高さ) が表示され、これらの列には 25 ピクセルの div ボックスが積み重ねられています。これらの div ボックスのそれぞれは、その日の 15 分刻みの時間を表しています。予定が作成されると、画面はスタッフメンバーとその予定の開始時間に一致する適切な 15 分の時間ブロック内に div ボックスを描画します。

現在、私が作業しているコードは、これらの予定をドラッグ可能に設定し、15 分の時間単位をそれぞれドロップ可能に設定しています。これは、予定をスタッフ メンバー間で交換できるようにするためです。予定の div が新しい時間にドラッグされると、それを受け取るドロップ可能なボックスが予定の id 属性を分割し、php ページを呼び出してバックグラウンドで mysql テーブルを更新します。

今問題に：

予定の長さが 15 分間に設定されている場合、25 ピクセルのブロックが描画され、これはドラッグ可能になります。この 15 分の予定を新しい 15 分のドロップ可能な div にドラッグすると、魅力的に機能します。ただし、30、45、および 1 時間の予定 div (それぞれ 50px、75px、100px) を導入すると、問題が発生します。ドラッグ可能なアイテムがドロップ可能な div よりも大きい場合、何らかの理由で、ターゲットにしているアイテムのすぐ下にあるドロップ可能な div ボックスに常に予定が配置されます。たとえば、私のドラッグ可能オブジェクトの上部は 9:15 のスロットに並んでいて、9:30 の div ボックスにスナップします。したがって、データベースは誤った時間で更新されます。私が言うように、これはドラッグ可能な div がドロップ可能な div の高さを超える場合にのみ問題になります。

以下は私のJQueryコードです：

 //functions for the droppable div's - updates the time slots
 $(".time_Row" ).droppable({

    accept: ".blob15, .blob30, .blob45, .blob1hr",
    drop: function( event, ui ) {

        ui.draggable.position({

            of: $(this),
            my: 'left top',
            at: 'left top'

        });

        var id = $(this).closest("div").attr("id");
        var split = id.split("-");
        var app = ui.draggable.attr("id").split("&");
        //split start time for refresh
        var sTime = split[1].split(":");

        $.post("updateapp.php",
            {
              APID: app[0],
              ServiceTime: app[1],
              Date: app[3],
              StaffID: split[0],
              StartTime: split[1]

            }

        );

    }

});

//functions for 15 min blobs
 $( ".blob15" ).draggable({

 snap: '.time_Row',
 snapMode: 'inner'

 });

 //functions for 30 min blobs
 $( ".blob30" ).draggable({

 snap: '.time_Row',
 snapMode: 'inner'

 });

 //functions for 45 min blobs
 $( ".blob45" ).draggable({

 snap: '.time_Row',
 snapMode: 'inner',


 });

 //functions for 1hr blobs
 $( ".blob1hr" ).draggable({

 snap: '.time_Row',
 snapMode: 'inner'

 });

さらに情報が必要な場合は、お知らせください (JFiddle リンクを作成していないことをお詫びします。現在、非常に忙しい状況です!)。基本的に、ドラッグ可能なアイテムを、その上部に最も近いドロップ可能な div にスナップする方法を見つける必要があります。

ご協力いただきありがとうございます。

JB

4

1 に答える 1

0

Alright. I think I found a way to fix this for your, as I was able to duplicate it in JSFiddle.

Instead of using this:

ui.draggable.position({
    of: $(this),
    my: 'left top',
    at: 'left top'
});

You need to use this:

$(this).position({
    of: $(this),
    my: 'left top',
    at: 'left top'
});

JSFiddle: http://jsfiddle.net/Y6dbe/

Alternatively, you could use this as well:

ui.draggable.position({
    of: ui.draggable,
    my: 'left top',
    at: 'left top'
});

JSFiddle: http://jsfiddle.net/Y6dbe/1/

--------------------------------EDIT-------------------------------

I think I found a workaround in JQuery so that you don't have to do this in your PHP.

Replace this:

var id = $(this).closest("div").attr("id");

With this:

var id;    
if(ui.draggable.hasClass("blob15")
  || ui.draggable.hasClass("blob30")) {
    id = $(this).attr("id");
} else {
     id = $(this).prev("div").attr("id");
}

New JSFiddle: http://jsfiddle.net/Y6dbe/2/

于 2013-09-05T14:23:17.997 に答える