jquery放在顶部,而不是光标
问题描述:
我正在使用jquery拖放调度系统。我有一排时间(15分钟间隔)和工作人员列。jquery放在顶部,而不是光标
事件是divs,单元格内的绝对位置,它们的高度对应于事件的时间长度;所以事件在几个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;
}
});
当我拿起一个div,指定一个任务,任务的顶部以在那里滴当光标是小区结束。
因此,如果我拿起底部的任务,那么当我将任务移动到比如8:00开始时,光标可能在9:15。然后我放弃这项任务,并在9:15开始。
是否可以指定div被认为是放在div的顶部,而不是在它被拾取的位置?
另外,可拖动的div是不可放下的,所以不可能将一个任务放在另一个之上,还是后端应该处理这个问题?
编辑: 想法:当任务被抓住在顶线时,它可以正常工作。 如果在“拾取贴子”时它会向下移动,因此光标位于顶线?
EDIT2: 这是它;可移动div顶部捕捉到光标。
答
这是不容易的!
首先,你必须评估就拖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
...
谢谢你的努力,但它不能正常工作。例如,如果我将重要任务1移动到8点,它就会到达底部。 –
如果您努力了解如何进行计算......你将能够防止这种情况。我为你编码的是将事件的底部放在你拖动的地方。现在,如果计算失败,因为这一举措是不可能的......你必须努力。我不在这里免费代码。我只是给予帮助。你现在有办法做到这一点,你可以完成它。 –
我做了一个修改,其中div的顶部捕捉到光标, 似乎更直观。 –