jquery放在頂部，而不是光標

我正在使用jquery拖放調度系統。我有一排時間（15分鐘間隔）和工作人員列。jquery放在頂部，而不是光標

事件是divs，單元格內的絕對位置，它們的高度對應於事件的時間長度;所以事件在幾個15分鐘的小區之上流動。

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

當我拿起一個div，指定一個任務，任務的頂部以在那裏滴當光標是小區結束。

因此，如果我拿起底部的任務，那麼當我將任務移動到比如8:00開始時，光標可能在9:15。然後我放棄這項任務，並在9:15開始。

是否可以指定div被認爲是放在div的頂部，而不是在它被拾取的位置？

另外，可拖動的div是不可放下的，所以不可能將一個任務放在另一個之上，還是後端應該處理這個問題？

編輯：想法：當任務被抓住在頂線時，它可以正常工作。如果在「拾取貼子」時它會向下移動，因此光標位於頂線？

EDIT2：這是它;可移動div頂部捕捉到光標。

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

來源

2017-04-25 Leif Neland

這是不容易的！

首先，你必須評估就拖start拖動的元素的高度。
然後，在drop，你必須得到下降行索引和細胞指數...

並基於拖動的元素的高度，你可以找到合適的行中右邊的單元格，你真正想要的元素被追加。

所以這裏是代碼：
而你的JSFiddle updated。

// 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被「佔領」，讓下降。

爲「標記」的td，你可以使用data ...

來源

2017-04-25 12:18:41

謝謝你的努力，但它不能正常工作。例如，如果我將重要任務1移動到8點，它就會到達底部。 –

如果您努力瞭解如何進行計算......你將能夠防止這種情況。我爲你編碼的是將事件的底部放在你拖動的地方。現在，如果計算失敗，因爲這一舉措是不可能的......你必須努力。我不在這裏免費代碼。我只是給予幫助。你現在有辦法做到這一點，你可以完成它。 –

我做了一個修改，其中div的頂部捕捉到光標，似乎更直觀。 –

jquery放在頂部，而不是光標

回答

相關問題