Question

所有TR都是可排序的，我想要实现的目标是：

一旦我开始拖动TR，占位符就会被替换为与拖动的TR相同的结构。

当我拖动TR时，我应该可以将鼠标悬停在拖动TD的前6 TR上。但我的问题是，当我开始拖动悬停工作正常时，但只要我移动TR悬停就不再正常工作了。

实施例：如果我拖动第三个TR并将鼠标悬停在TD上，则可以正常工作。只要我拖到第二个TR，悬停TD就不再有效了，除非我移动到第一个TD而不是再次正常工作。

使用Javascript：

$(".OssDataSortable").sortable({
    items: 'tr',
    opacity: 0.00001,
    placeholder: 'OssDataSortablePlaceholder',
    forcePlaceholderSize: true,
    axis: "y",
    dropOnEmpty: false,

    activate: function(event, ui) {
      var ii = 0;

      $(ui.placeholder).html('<td id="level_0" class="OssDataDroppable">0</td>')
        .append('<td class="OssDataDroppable">1</td>')
        .append('<td class="OssDataDroppable">2</td>')
        .append('<td class="OssDataDroppable">3</td>')
        .append('<td class="OssDataDroppable">4</td>')
        .append('<td class="OssDataDroppable">5</td>')
        .append('<td>text .....</td>');


      $(".OssDataDroppable").droppable({
        tolerance: "pointer",
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        over: function(event, ui) {
          $("#DROP_NUMBER").val($(this).text());
        }
      });
    }

  });

HTML：

<tbody class="OssDataSortable">
      <tr class="OssDataDraggable">
        <td valign="middle" style="min-width:28px;"></td>
        <td valign="middle" style="min-width:28px;"></td>
        <td valign="middle" style="min-width:28px;"></td>
        <td valign="middle" style="min-width:28px;"></td>
        <td valign="middle" style="min-width:28px;"></td>
        <td valign="middle" style="min-width:28px;"></td>
        <td valign="middle">
          ARTICLE 1
        </td>
      </tr>
     .......
      <tr class="OssDataDraggable">
        <td valign="middle" style="min-width:28px;"></td>
        <td valign="middle" style="min-width:28px;"></td>
        <td valign="middle" style="min-width:28px;"></td>
        <td valign="middle" style="min-width:28px;"></td>
        <td valign="middle" style="min-width:28px;"></td>
        <td valign="middle" style="min-width:28px;"></td>
        <td valign="middle">
          ARTICLE 4
        </td>
      </tr>
    </tbody>

http://plnkr.co/edit/ZtIYdq4oFSSvZ4ycrk68?p=preview

TKS。

Jquery UI易于拆卸和可拆卸

0 个答案: