Как мне остановить перетаскиваемый клон jquery от моего указателя мыши? - PullRequest
Новая
       71

Как мне остановить перетаскиваемый клон jquery от моего указателя мыши?

0 голосов
/ 17 апреля 2019

Я работаю над проектом, в котором я создаю планирование для компании, в которой я работаю, где планирование строится путем размещения таблиц в главной таблице и где каждый день каждой недели (все строки таблицы).) должно быть перетащено в таблицу на следующей неделе.Ниже приведен пример того, что я имею в виду с таблицами в таблице: 

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

Каждый с номером недели является перетаскиваемым, а каждая внутренняя таблица - выпадающим.

Нет проблем: когда я перемещаю перетаскиваемый объект, клон не располагается на курсоре, но его можно перемещать на количество пикселей в любом возможном направлении, даже вне поля зрения пользователя.

У меня естьпытался использовать параметр cursorAt для Draggable Widget с помощью jQuery, но это ничего не дает.Я также пытался использовать 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
  });

Мой перетаскиваемый: 

$('.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
  }
});

Я хочу, чтобы клон перетаскиваемого придерживалсяна мою позицию курсора, а не миль.Кто-нибудь знает, как решить эту проблему?

1 Ответ

0 голосов
/ 17 апреля 2019

Хорошо, я уже нашел решение (я искал его несколько дней и, конечно, как только вы отправите вопрос, вы его решите).

Если я использую appendTo: 'body' вместо appendTo: 'tbody', клон остается с мышью и не копируется в остальные таблицы. Стилизация тогда в основном исчезла, но это должно быть легче решить / это не такая большая проблема.

...