Question

我在调度系统中使用jquery拖放功能。我有一个时间行（间隔15分钟）和工人列。

事件是div，在单元格内绝对位置，它们的高度对应于事件的时间长度;因此事件会在几个15分钟的单元格之上流动。

{{1}}

当我拿起一个div，指定一个任务时，任务的顶部将在光标所在的单元格处结束。

因此，如果我在底部拿起任务，那么当我将任务移动到8:00开始时，光标可能是9:15。然后我放弃了任务，它开始于9:15开始。

是否可以指定div被认为是放在div的顶部，而不是放在它被拾取的位置？

另外，可拖动的div是否可以不可丢弃，因此不可能将一个任务放在另一个任务之上，或者后端是否应该处理它？</ p>

编辑：想法：当任务被抓到顶线时，它可以正常工作。如果＆＃34;拿起便利贴＃34;它向下移动所以光标位于顶线怎么办？

EDIT2：这里是;可移动div的顶部捕捉到光标。

https://jsfiddle.net/m5ukpngp/

Answer 1

这不是一件容易的事！

首先，您必须在拖动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 ...

jquery drop在顶部，而不是游标

1 个答案: