Сделайте tr повторно заказываемым вместе с contenteditable td, но тоже не работает

Question

Я хочу сделать мою таблицу tr перетаскиваемой вверх / вниз с contenteditable td, но она не работает, как ожидалось

 <div id="" class="table-editable" data-action="">
                <table>
                    <thead>
                        <tr>
                            <th>Discount Title</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr>
                            <td  contenteditable="true"></td>                       
                        </tr>
                    </tbody>
                </table>
            </div>

<script type="text/javascript">
     $(".table-editable").find("tbody").sortable({
            items: "> tr",
            appendTo: "parent",
            cancel: '[contenteditable]'
        });
</script>

Answer 1

Вроде нормально работает. Вам просто нужно добавить еще один столбец, чтобы строку можно было перетаскивать, поскольку она не будет работать с элементом contenteditable. См. Фрагмент ниже:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="test" class="table-editable" data-action="">
  <table>
    <thead>
      <tr>
        <th>Discount Title</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td contenteditable="true">row-1,col-1</td>
        <td>row-1,col-2</td>
        <td>row-1,col-3</td>
      </tr>
      <tr>
        <td contenteditable="true">row-2,col-1</td>
        <td>row-2,col-2</td>
        <td>row-2,col-3</td>
      </tr>
      <tr>
        <td contenteditable="true">row-3,col-1</td>
        <td>row-3,col-2</td>
        <td>row-3,col-3</td>
      </tr>
    </tbody>
  </table>
</div>
<script>
$(".table-editable").find("tbody").sortable({
  items: "> tr",
  appendTo: "parent",
  cancel: "[contenteditable]"
});
</script>