悬停时的 JQuery Droppable 突出显示答案

【问题标题】：JQuery Droppable Highlight on Hover悬停时的 JQuery Droppable 突出显示
【发布时间】：2016-08-06 10:57:29
【问题描述】：

我想创建一个效果，我基本上突出显示可拖动 div 下方的所有字段 (td)。我知道 intersect: "touch" 在视觉上起到了作用，但这给我留下了一些问题：

draggable 一次只能悬停和触摸多个单元格 - 但只能在一行内！
我想根据停止位置触发事件。不使用 intersect 我有一个特定的 td 。现在我最多有 4 个。但我只想要第一个用于将来的事件处理。所以基本上它所触及的左外侧 td 作为起始位置！

有什么方法可以调整我的代码来解决这些问题？我什么也找不到。非常感谢！！

HTML：

<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="droppable"></td>
      <td class="droppable"></td>
      <td class="droppable"></td>
      <td class="droppable"></td>
    </tr>
    <tr>
      <td class="droppable"></td>
      <td class="droppable"></td>
      <td class="droppable"></td>
      <td class="droppable"></td>
    </tr>
  </tbody>
</table>

<div class="draggable">
  <span>Draggable</span>
</div>

CSS：

th, td {
  border: 1px solid black;
  width: 20px;
  height: 20px;
}

.draggable {
  background-color: green;
  width: 75px;
}

.bg-change {
  background-color: grey;
}

JS：

$('.draggable').draggable();
$('.droppable').droppable({
    hoverClass: "bg-change",
  tolerance: "touch"
});

https://jsfiddle.net/ohfztugh/13/

【问题讨论】：

标签： jquery jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

我有两种方法。

1.第一个技巧：

您可以使用over 和out 方法来实现。

类似的东西

$('.droppable').droppable({
    //hoverClass: "bg-change",
  tolerance: "touch",

  over: function(){

  $(this).parent("tr").siblings().removeClass("bg-change");
  $(this).parent("tr").addClass("bg-change");

  },

  out:function(){


  $(this).parent("tr").removeClass("bg-change");

  } ,

drop:function(){


  $(".droppable").parent("tr").removeClass("bg-change");
  $(this).parent("tr").addClass("bg-change");

  }
});

Fiddle

不完美。但它肯定会给你一个继续的想法。

2。第二种方法

只需让你的 tr droppable 。并使用torelance:"fit"

$('.draggable').draggable();
$('tr').droppable({
    hoverClass: "bg-change",
  tolerance: "fit",


});

Working Fiddle

或tolerance:"intersect"

$('.draggable').draggable();
$('tr').droppable({
    hoverClass: "bg-change",
  tolerance: "intersect",


});

Working Fiddle 2

如果您希望单个单元格可放置，请执行此操作

$('td,th').droppable({
    hoverClass: "bg-change",
  tolerance: "intersect",


});

Working Fiddle 3

【讨论】：

感谢您的回答，但这并不是我的意思。我想达到与此处类似的效果：fullcalendar.io 我可以将事件悬停在多个单元格上并查看它们的背景，然后将最左边的单元格作为我的“可放置目标”
这只会突出显示我的光标所在的单元格。
这就是你的例子显示的......对吗？否则请您详细说明
基本上，如果您访问指向 fullcalendar 的链接。一个事件（为期 3 天）将在拖动时突出显示其结束的所有日子。在这种情况下，显然是 3 天。如果我使用公差：触摸我会得到相同的视觉效果。但是，我现在无法在“停止”上触发任何事件，因为我现在有效地将鼠标悬停在多个 droppable 上。但我只希望一个字段接受可拖动但仍突出显示所有我悬停的字段
你需要在 drop 方法中编码 .. 像这样 .. 只有字段接受它并且只注册结帐 jsfiddle.net/ohfztugh/22 和 jsfiddle.net/ohfztugh/21

【解决方案2】：

由于我无法将此小提琴添加为评论，因此我将其发布为答案。

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

});
$('td').droppable({
    hoverClass: "hover",
    tolerance: "touch",

  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;
  }
});

激活：防止触摸多次触发。

Working fiddle

希望这可以帮助您朝着正确的方向前进！

对不起，我的英语不好！

（我的问题是它总是向左对齐而不是最触动的 td）

【讨论】：