jquery drop on top、not cursor

Question

スケジューリングシステムにjqueryドラッグ/ドロップを使用しています。私は時間がある行（15分間隔）と労働者の列を持っています。

イベントはdivであり、セル内の絶対位置を表し、その高さはイベントの時間長に対応します。イベントがいくつかの15分のセルの上を流れます。

https://jsfiddle.net/m5ukpngp/

$('.event').draggable({ 
    opacity: .7, 
    cursor: 'move', 
    revert: 'invalid', 
}); 
$('td').droppable({ 
    hoverClass: "hover", 
    tolerance: "pointer", 

    drop: function(event, ui) { 
    if (false === dropped) { 
    $(this).effect("highlight", {}, 1500); 
    dropped = true; 
    $(ui.draggable).detach().css({ 
    top: 0, 
    left: 0 
    }).appendTo($(this)); 
} 
}, 
activate: function(event, ui) { 
dropped = false; 
    } 
}); 

Iタスクを指定し、DIVを拾う場合、タスクの上部には、落下するときにカーソルがあったセルで終了します。

私がタスクを最下位に取り上げると、タスクを8時00分に開始すると、カーソルが9時15分に移動することがあります。私はその作業を中止し、9時15分に開始する。

divがピックアップされる場所ではなく、divの上部にドロップされると指定することはできますか？

また、ドラッグ可能なdivをドロップ不可能にすることができるので、あるタスクを別のタスクの上にドロップすることはできませんか、バックエンドはそれを処理する必要がありますか？

EDIT： アイデア：タスクが最上部の行にあるときに正しく動作します。 "ポストイット"をピックアップすると、カーソルが一番上の行に位置するように下に移動するとどうなりますか？

EDIT2： ここにあります。可動divの上端がカーソルにスナップします。

https://jsfiddle.net/m5ukpngp/1/

Answer 1

これは簡単なものではありません！

まず、ドラッグ時にドラッグされた要素の高さを評価する必要がありますstart。
その後、dropに、あなたがドロップ行インデックスおよびセルインデックスを取得する必要が...

そして、ドラッグされた要素の高さに基づいて、あなたは本当に要素がしたい右の行の右のセルを見つけることができます追加する。

コードは
です。JSFiddle updatedです。 「非ドロップ可能」として、いくつかのtdの定義についてのあなたの他の質問...

については

// Drag element height, determined on drag start and used on drop. 
var dragElHeight; 

$('.event').draggable({ 
    opacity: .7, 
    cursor: 'move', 
    revert: 'invalid', 

    // Get the dragged element height. 
    start: function(e){ 
    dragElHeight = Math.round($(e.target).height()/19);  // 19px is the td height in CSS 
    console.log(dragElHeight); 
    }, 

}); 

$('td').droppable({ 
    hoverClass: "hover", 
    drop: function(event, ui) { 

    // Get cell indexes... And calculate the "real" target cell to be apended. 
    var thisRowIndex = $(this).parent("tr").index()+1; 
    var thisCellIndex = $(this).index()-1; 
    var realTargetRow = $(this).closest("table").find("tr").eq(thisRowIndex-dragElHeight); 

    if (false === dropped) { 
     $(this).effect("highlight", {}, 1500); 
     dropped = true; 
     $(ui.draggable).detach().css({ 
     top: 0, 
     left: 0 
     }).appendTo(realTargetRow.find("td").eq(thisCellIndex)); // Append is here. 
    } 
    }, 
    activate: function(event, ui) { 
    dropped = false; 
    } 
}); 

それは行うことができます。しかし、これはかなり難しい課題です。
要素でカバーされているtdを評価し、「占有」とマークする必要があります。
次にドロップした場合、このドラッグされた要素によってカバーされる他のすべてのtdがドロップを許可するために「占有」されているかどうかをチェックする必要があります。

「マーク」tdするには、努力のためdata ...