Question

我想创建一个效果，我基本上突出显示可拖动div下方的所有字段（td）。我知道相交：＆＃34;触摸＆＃34;在视觉上做的伎俩，但这给我留下了一些问题：

拖动应该只能一次悬停和触摸多个单元格 - 但只能在一行内！
我想根据停止位置发射事件。没有使用交叉我有一个特定的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/

Answer 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放置即可。并使用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

Answer 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）

悬停时{J 44 Droppable突出显示

2 个答案: