如何阻止我的 jquery 可拖动克隆远离鼠标指针？答案

【问题标题】：How do I stop my jquery draggable clone from moving far away from my mouse pointer?如何阻止我的 jquery 可拖动克隆远离鼠标指针？
【发布时间】：2019-04-17 07:37:27
【问题描述】：

我正在从事一个项目，我正在为我工作的公司制定计划，通过在主表中放置表格来构建计划，以及每周的每一天（所有表格行） ) 必须可以拖到下周的表格中。下面提供了我对表格中的表格的意思的示例：

<div class="table-responsive">
  <table>
    <thead>
      <tr>
        <th></th>
        <th>Week 1</th>
        <th>Week 2</th>
        <th>Week n</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <table>
            <tbody>
              <tr>
                <td>user name</td>
              </tr>
              <tr>
                <td>user function</td>
              </tr>
            </tbody>
          </table>
        </td>
        <td>
          <table inside-table week1>
            <tbody>
              <tr week1 index=Monday>
                <td>Monday</td>
                <td>Monday task</td>
                <td>Monday task hours</td>
              </tr>
              <tr week1 index=Tuesday>
                <td>Tuesday</td>
                <td>Tuesday task</td>
                <td>Tuesday task hours</td>
              </tr>
              etc.
            </tbody>
          </table>
          <table inside-table week2>
            <tbody>
              <tr week2 index=Monday>
                <td>Monday</td>
                <td>Monday task</td>
                <td>Monday task hours</td>
              </tr>
              <tr week2 index=Tuesday>
                <td>Tuesday</td>
                <td>Tuesday task</td>
                <td>Tuesday task hours</td>
              </tr>
              etc.
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</div>

每个带有周数的都是可拖动的，每个内部表格都是可放置的。

没有我的问题：当我移动我的可拖动对象时，克隆不会定位在光标处，但它可以在每个可能的方向上移动 x 个像素，即使用户看不见。

我尝试使用 jQuery 的 Draggable Widget 的 cursorAt 选项，但没有任何效果。我还尝试将 appendTo 与 'tbody'、'tr[index]' 和 'parent' 一起使用，其中前两个在表格中的任何地方都显示，这不是我想要的（尽管助手确实留在了正确的地方），最后一个什么也没做。

我的可拖动：

  $('tr[index]').draggable({
    cancel: "tr.no-drag",
    opacity: 0.8,
    scroll: true,
    cursor: 'all-scroll',
    cursorAt: { top: 0, left: 0 },
    helper: 'clone',
    revert: "invalid",
    zIndex: 100
  });

我的droppable：

$('.inside-table').droppable({
  accept: 'tr[index]',
  tolerance: "pointer",
  over: function(event, ui) {
    //highlight area to show it is droppable
  },

  out: function(event, ui) {
    // remove highlight when area is left
  },

  drop: function(event, ui) {
    //update dragged item & refresh (make sure position in table is kept)
    // only change week & user, day can be changed manually
  }
});

我希望可拖动对象的克隆保持在我的光标位置，而不是几英里之外。有谁知道如何解决这个问题？

【问题讨论】：

标签： jquery draggable droppable

【解决方案1】：

好的，我已经找到了解决方案（我已经研究了好几天了，当然，只要您发布问题，您就会解决它）。

如果我使用appendTo: 'body' 而不是appendTo: 'tbody'，则克隆会留在鼠标中，不会复制到其余表格中。然后样式大部分都消失了，但这应该更容易解决/不是什么大问题。

【讨论】：