blocks|key|2460886|text|这里有两个问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2460887|2460888|在可编辑内容的项目上添加取消选项。|ordered-list-item|2460889|删除disableSelection()，因为它会使目标项目失去焦点。|2460890|2460891|​|2460892|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+%2B+1);
++++++++});
++++};

$("#sort+tbody").sortable({
++++helper:+fixHelperModified,
++++stop:+updateIndex,
++++cancel:+'[contenteditable]',
})//.disableSelection();|code-block|syntax|javascript|2460893|<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%2B</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%2B</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>|2460894|2460895|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|V|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|W|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|X|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|10|8|@]|9|@]|A|$N|O]]|$1|P|3|Q|5|M|7|11|8|@]|9|@]|A|$N|O]]|$1|R|3|J|5|6|7|12|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|T|$]]

<p>2 issues here:</p>

<ol>
<li>Add a cancel option on the contenteditable items.</li>
<li>Remove disableSelection() as it makes the target item lose focus.</li>
</ol>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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();</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;

&lt;h1&gt;Sorting A Table With jQuery UI&lt;/h1&gt;
&lt;a href='http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/'&gt;Make table rows sortable with jQuery UI&lt;/a&gt;

&lt;table id="sort" class="grid" title="Kurt Vonnegut novels"&gt;
    &lt;tbody&gt;
    &lt;tr&gt;&lt;td class="InputBox_RowClass"&gt;1&lt;/td&gt;&lt;td&gt;&lt;p contenteditable='true'&gt;1969&lt;/p&gt;&lt;/td&gt;&lt;td&gt;Slaughterhouse-Five&lt;/td&gt;&lt;td&gt;A+&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td class="InputBox_RowClass"&gt;2&lt;/td&gt;&lt;td&gt;&lt;p contenteditable='true'&gt;1952&lt;/p&gt;&lt;/td&gt;&lt;td&gt;Player Piano&lt;/td&gt;&lt;td&gt;B&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td class="InputBox_RowClass"&gt;3&lt;/td&gt;&lt;td&gt;&lt;p contenteditable='true'&gt;1963&lt;/p&gt;&lt;/td&gt;&lt;td&gt;Cat's Cradle&lt;/td&gt;&lt;td&gt;A+&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td class="InputBox_RowClass"&gt;4&lt;/td&gt;&lt;td&gt;&lt;p contenteditable='true'&gt;1973&lt;/p&gt;&lt;/td&gt;&lt;td&gt;Breakfast of Champions&lt;/td&gt;&lt;td&gt;C&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td class="InputBox_RowClass"&gt;5&lt;/td&gt;&lt;td&gt;&lt;p contenteditable='true'&gt;1965&lt;/p&gt;&lt;/td&gt;&lt;td&gt;God Bless You, Mr. Rosewater&lt;/td&gt;&lt;td&gt;A&lt;/td&gt;&lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>


<p>I have a table with a column editible. When I use example from <a href="http://jsfiddle.net/pmw57/tzYbU/205/" rel="nofollow noreferrer">this JSFiddle</a> to make rows of table dragable.</p>

<p>The contenteditable attribute is not working. This is <a href="https://jsfiddle.net/jiehu567/otenxyyk/" rel="nofollow noreferrer">my JS Fiddle</a></p>

<p>If you comment out the javascript, you can see the column year is editible, but if you want to add the javascript to make row dragable, then the year column is not editible, though the attribute "contenteditible = 'true' is in page source code.</p>

<p>Here's my html for reference:</p>

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

<p></p>

<p>jQuery:</p>

<pre><code>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(); 
</code></pre>


How to enable contentediaible for dragable rows of table in html/css/jQuery

jQuery

我有一张表，它的列是可编辑的。当我使用中的示例来使表格中的行可拖动时。contenteditable属性不起作用。这是如果您注释掉javascript，您可以看到列year是可编辑的，但是如果您想添加javascript以使行可拖动，那么year列是不可编辑的，尽管属性"contenteditible = 'true‘...

问如何在html/css/jQuery中为表格可拖动行启用contentediaible
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在html/css/jQuery中为表格可拖动行启用contentediaibleEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在html/css/jQuery中为表格可拖动行启用contentediaible
EN