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放在顶部，而不是光标

回答

相关问题