Как включить contentediaible для перетаскиваемых строк таблицы в html / css / jQuery - PullRequest
Новая
       10

Как включить contentediaible для перетаскиваемых строк таблицы в html / css / jQuery

0 голосов
/ 01 июня 2018

У меня есть таблица с редактируемым столбцом.Когда я использую пример из , этот JSFiddle делает строки таблицы перетаскиваемыми.

Атрибут contenteditable не работает.Это my JS Fiddle

Если вы закомментируете javascript, вы можете увидеть, что столбец year можно редактировать, но если вы хотите добавить javascript, чтобы сделать строку перетаскиваемой, то столбец yearнедоступно для редактирования, хотя атрибут «contenteditible = 'true» находится в исходном коде страницы.

Вот мой HTML-код для справки: 

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<table id="sort" class="grid" title="Kurt Vonnegut novels">
<tbody>
    <tr><td class="InputBox_RowClass">1</td><td><p contenteditable='true'>1969</p></td><td>Slaughterhouse-Five</td><td>A+</td></tr>
    <tr><td class="InputBox_RowClass">2</td><td><p contenteditable='true'>1952</p></td><td>Player Piano</td><td>B</td></tr>
    <tr><td class="InputBox_RowClass">3</td><td><p contenteditable='true'>1963</p></td><td>Cat's Cradle</td><td>A+</td></tr>
    <tr><td class="InputBox_RowClass">4</td><td><p contenteditable='true'>1973</p></td><td>Breakfast of Champions</td><td>C</td></tr>
    <tr><td class="InputBox_RowClass">5</td><td><p contenteditable='true'>1965</p></td><td>God Bless You, Mr. Rosewater</td><td>A</td></tr>
</tbody>

jQuery: 

var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index) {
        $(this).width($originals.eq(index).width())
    });
    return $helper;
};

$("#sort tbody").sortable({
    helper: fixHelperModified
}).disableSelection();

1 Ответ

0 голосов
/ 01 июня 2018

2 проблемы здесь:

  1. Добавить опцию отмены для предмета, требующего защиты.
  2. Удалите disableSelection (), поскольку целевой элемент теряет фокус. 

var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index) {
        $(this).width($originals.eq(index).width())
    });
    return $helper;
},
    updateIndex = function(e, ui) {
        $('td.index', ui.item.parent()).each(function (i) {
            $(this).html(i + 1);
        });
    };

$("#sort tbody").sortable({
    helper: fixHelperModified,
    stop: updateIndex,
    cancel: '[contenteditable]',
})//.disableSelection();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<h1>Sorting A Table With jQuery UI</h1>
<a href='http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/'>Make table rows sortable with jQuery UI</a>

<table id="sort" class="grid" title="Kurt Vonnegut novels">
    <tbody>
    <tr><td class="InputBox_RowClass">1</td><td><p contenteditable='true'>1969</p></td><td>Slaughterhouse-Five</td><td>A+</td></tr>
        <tr><td class="InputBox_RowClass">2</td><td><p contenteditable='true'>1952</p></td><td>Player Piano</td><td>B</td></tr>
        <tr><td class="InputBox_RowClass">3</td><td><p contenteditable='true'>1963</p></td><td>Cat's Cradle</td><td>A+</td></tr>
        <tr><td class="InputBox_RowClass">4</td><td><p contenteditable='true'>1973</p></td><td>Breakfast of Champions</td><td>C</td></tr>
        <tr><td class="InputBox_RowClass">5</td><td><p contenteditable='true'>1965</p></td><td>God Bless You, Mr. Rosewater</td><td>A</td></tr>
    </tbody>
</table>
...