我有一组由相应的 jQuery ui 小部件呈现的可排序 div。
我主要在 Chrome 中对此进行了测试(到目前为止)，并且以真正的 Google 方式，他们找到了一种使事情正常运行的方法(即使可能存在会导致其他浏览器出错的轻微错误)。现在，我不确定这是否正是正在发生的事情，但我只想说，这种情况下的所有内容在 Google Chrome 中都可以正常工作，但在任何其他浏览器中都无法正常工作。
这里有很多代码，所以如果您认为您可能知道 jQuery-ui 的可排序小部件如何在非 Chrome 浏览器中导致这些问题，请随时跳过它。也许有人可以提示一些简单的场景让我检查，但如果它是技术性的并且你仍然想帮助我，所有代码和标记都在下面。
相关的jQuery(停止回调函数暂时只包含测试数据):
$(".editContainer").sortable({
revert: true,
cursor: "move",
stop: function (event, ui) {
$(this).find(".editObjectsTable").each(function () {
console.log($(this).find(".pageOrderNum").text());
});
}
});
关于 HTML(有一点，抱歉。它是 C# 生成的，为了便于阅读，我不得不逐行格式化它):
<div class="editContainer">
<table class="editObjectsTable">
<tr>
<td class="pageOrderNum" rowspan="2">1.</td>
<td rowspan="2" class="objectName">Paragraph</td>
<td class="settingType">Text Content</td><td class="settingType">Text Alignment</td>
<td class="settingType">Highlight</td>
<td class="objectControlButtonHolder" rowspan="2">
<button class="deleteObjectBtn">X</button>
<input id="objID" type="hidden" value="181" />
</td>
</tr>
<tr>
<td class="textAreaHolder">
<textarea maxlength="4000" class="editTextArea">Please accept our invitation to participate in the Connect-CTY notification service. We know your personal information is important, and rest assured that we will not share it with anyone. If you have NOT already received a test phone call from us, or you would like to provide additional contact information, click the Connect-CTY image below to sign up.</textarea>
</td>
<td class="alignmentTableHolder">
<table class="alignmentTable">
<tr>
<td class="alignmentRadioHolder">
<input id="inputRadioLeft181" type="radio" name="paragraphAlignment181" value="left" />
</td>
<td class="alignmentRadioHolder">
<input id="inputRadioCenter181" type="radio" checked="checked" name="paragraphAlignment181" value="center" />
</td>
<td class="alignmentRadioHolder">
<input id="inputRadioRight181" type="radio" name="paragraphAlignment181" value="right" />
</td>
<td class="alignmentRadioHolder">
<input id="inputRadioJustify181" type="radio" name="paragraphAlignment181" value="justify" />
</td>
</tr>
<tr>
<td class="alignmentLabelHolder">
<label for="inputRadioLeft181">Left</label>
</td>
<td class="alignmentLabelHolder">
<label for="inputRadioCenter181">Center</label>
</td>
<td class="alignmentLabelHolder">
<label for="inputRadioRight181">Right</label>
</td>
<td class="alignmentLabelHolder">
<label for="inputRadioJustify181">Justify</label>
</td>
</tr>
</table>
</td>
<td class="highlightTableHolder">
<table class="highlightTable">
<tr>
<td class="highlightCheckboxHolder">
<input id="inputCheckboxItalic181" type="checkbox" name="paragraphHighlight181" value="italic" />
</td>
<td class="highlightCheckboxHolder">
<input id="inputCheckboxBold181" type="checkbox" name="paragraphHighlight181" value="bold" />
</td>
<td class="highlightCheckboxHolder">
<input id="inputCheckboxUnderline181" type="checkbox" name="paragraphHighlight181" value="underline" />
</td>
</tr>
<tr>
<td class="highlightLabelHolder">
<label for="inputCheckboxItalic181">Italic</label>
</td>
<td class="highlightLabelHolder">
<label for="inputCheckboxBold181">Bold</label>
</td>
<td class="highlightLabelHolder">
<label for="inputCheckboxUnderline181">Underline</label>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="editObjectsTable">
<tr>
<td class="pageOrderNum">2.</td><td class="objectName">--Line Break--</td>
<td class="objectControlButtonHolder">
<button class="deleteObjectBtn">X</button>
<input id="objID" type="hidden" value="182" />
</td>
</tr>
</table>
<table class="editObjectsTable">
<tr>
<td class="pageOrderNum" rowspan="4">3.</td>
<td rowspan="4" class="objectName">Image-Link</td>
<td class="settingType">File Name</td>
<td class="settingType">Size</td>
<td class="settingType">New Tab</td>
<td class="objectControlButtonHolder" rowspan="4">
<button class="deleteObjectBtn">X</button>
<input id="objID" type="hidden" value="183" />
</td>
</tr>
<tr>
<td>
<input type="text" maxlength="260" class="editTextInputLeft" value="CTY.gif" />
</td>
<td class="sizeTableHolder">
<table class="sizeTable">
<tr>
<td class="sizeRadioHolder">
<input id="inputRadioThumb183" type="radio" name="imageSize183" value="thumb" />
</td>
<td class="sizeRadioHolder">
<input id="inputRadioSmall183" type="radio" name="imageSize183" value="small" />
</td>
<td class="sizeRadioHolder">
<input id="inputRadioMedium183" type="radio" name="imageSize183" value="medium" />
</td>
<td class="sizeRadioHolder">
<input id="inputRadioLarge183" type="radio" name="imageSize183" value="large" />
</td>
<td class="sizeRadioHolder">
<input id="inputRadioWideSmall183" type="radio" name="imageSize183" value="wideSmall" />
</td>
</tr>
<tr>
<td class="sizeLabelHolder">
<label for="inputRadioThumb183">Thumb</label>
</td>
<td class="sizeLabelHolder">
<label for="inputRadioSmall183">Small</label>
</td>
<td class="sizeLabelHolder">
<label for="inputRadioMedium183">Medium</label>
</td>
<td class="sizeLabelHolder">
<label for="inputRadioLarge183">Large</label>
</td>
<td class="sizeLabelHolder">
<label for="inputRadioWideSmall183">Wide-Sm.</label>
</td>
</tr>
<tr>
<td class="sizeRadioHolder">
<input id="inputRadioWideMedium183" type="radio" name="imageSize183" value="wideMedium" />
</td>
<td class="sizeRadioHolder">
<input id="inputRadioWideLarge183" type="radio" name="imageSize183" value="wideLarge" />
</td>
<td class="sizeRadioHolder">
<input id="inputRadioTallSmall183" type="radio" checked="checked" name="imageSize183" value="tallSmall" />
</td>
<td class="sizeRadioHolder">
<input id="inputRadioTallMedium183" type="radio" name="imageSize183" value="tallMedium" />
</td>
<td class="sizeRadioHolder">
<input id="inputRadioTallLarge183" type="radio" name="imageSize183" value="tallLarge" />
</td>
</tr>
<tr>
<td class="sizeLabelHolder">
<label for="inputRadioWideMedium183">Wide-Med.</label>
</td>
<td class="sizeLabelHolder">
<label for="inputRadioWideLarge183">Wide-Lg.</label>
</td>
<td class="sizeLabelHolder">
<label for="inputRadioTallSmall183">Tall-Sm.</label>
</td>
<td class="sizeLabelHolder">
<label for="inputRadioTallMedium183">Tall-Med.</label>
</td>
<td class="sizeLabelHolder">
<label for="inputRadioTallLarge183">Tall-Lg.</label>
</td>
</tr>
</table>
</td>
<td>
<table class="newTabTable">
<tr>
<td class="newTabRadioHolder">
<input id="inputRadioTrue183" type="radio" checked="checked" name="linkNewTab183" value="true" />
</td>
<td class="newTabRadioHolder">
<input id="inputRadioFalse183" type="radio" name="linkNewTab183" value="false" />
</td>
</tr>
<tr>
<td class="newTabLabelHolder">
<label for="inputRadioTrue183">True</label>
</td>
<td class="newTabLabelHolder">
<label for="inputRadioFalse183">False</label>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="settingType settingType2">Target</td>
<td class="settingType settingType2">Caption</td>
<td class="settingType settingType2">Preview</td>
</tr>
<tr>
<td>
<input maxlength="2000" class="editTextInputLeft" value="https://portal.blackboardconnectcty.com/welcome.aspx?eiid=1207B6088C3571A76F7E" />
<br/>
<span class="testLink">Test</span>
</td>
<td>
<input type="text" maxlength="500" class="editTextInputLeft" value="" />
</td>
<td>
<img class="contentImgThumb" src="/CMS Files/EmergencyNotificationSystem/CTY.gif" title="CTY.gif" alt="CTY.gif" />
</td>
</tr>
</table>
</div>
这里是关于 CSS 的任何内容(再次抱歉，与页面的这一部分无关的任何内容都已删除，以免这篇文章变得比现在更加臃肿):
div.editContainer
{
width: 94%;
height: 400px;
overflow-y: scroll;
border: 1px solid #000;
text-align: center;
margin: auto;
resize: vertical;
}
div.editPreview
{
width: 852px;
margin-left: 0px;
padding-top: 15px;
border-top: 5px double #003500;
}
.editLabelTitle
{
font-size: 1.5em;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-weight: bold;
color: #003500;
}
table.editObjectsTable
{
width: 100%;
margin: auto;
border: 1px solid #888;
cursor: pointer;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #ffecb4;
/* Opera 11.10+ */
background: -o-linear-gradient(bottom, #f5d77d, #ffecb4);
/* Firefox 3.6+ */
background: -moz-linear-gradient(bottom, #f5d77d, #ffecb4);
/* Chrome 7+ & Safari 5.03+ */
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #f5d77d), color-stop(1, #ffecb4));
/* Newer Browsers */
background: linear-gradient(bottom, #f5d77d, #ffecb4);
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffecb4,EndColorStr=#f5d77d)";
/* IE5.5 - IE7 */
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffecb4,EndColorStr=#f5d77d);
}
.editObjectsTable *
{
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
table.editObjectsTable tr td
{
border-left: 1px dashed #888;
}
td.objectName
{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #22862a;
vertical-align: middle;
padding-right: 5px;
border-left: none !important;
}
input.editTextInputCenter
{
width: 95%;
resize: none;
margin-right: 0px;
margin-left: 0px;
text-align: center;
}
input.editTextInputLeft
{
width: 95%;
resize: none;
margin-right: 0px;
margin-left: 0px;
text-align: left;
}
textarea.editTextArea
{
width: 95%;
height: 80px;
resize: vertical;
margin-right: 0px;
margin-left: 0px;
margin-top: 4px;
}
table.alignmentTable, table.highlightTable, table.newTabTable, table.sizeTable
{
width: 100%;
}
td.alignmentRadioHolder, td.highlightCheckboxHolder, td.newTabRadioHolder, td.sizeRadioHolder
{
vertical-align: bottom;
text-align: center;
border-left: none !important;
}
td.highlightCheckboxHolder, td.highlightLabelHolder
{
width: 33%;
border-left: none !important;
}
td.newTabLabelHolder
{
width: 50%;
border-left: none !important;
}
td.alignmentLabelHolder, td.highlightLabelHolder, td.newTabLabelHolder, td.sizeLabelHolder
{
vertical-align: top;
font-family: Perpetua, Baskerville, "Big Caslon", "Palatino Linotype", Palatino, "URW Palladio L", "Nimbus Roman No9 L", serif;
color: #000;
vertical-align: top;
text-align: center;
font-size: .8em;
border-left: none !important;
}
td.settingType
{
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
color: #660000;
position: relative;
}
td.settingType2
{
border-top: 1px dashed #888;
}
td.pageOrderNum
{
width: 50px;
text-align: center;
font-size: 17px;
font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
color: #826c2c;
border-left: none !important;
}
td.objectControlButtonHolder
{
width: 30px;
vertical-align: middle;
}
td.highlightTableHolder
{
width: 160px;
}
td.alignmentTableHolder
{
width: 160px;
}
td.sizeTableHolder
{
}
td.textAreaHolder
{
min-width: 280px;
}
td.picPreviewHolder
{
}
img.picPreview
{
width: 55px;
height: 55px;
}
.deleteObjectBtn {
-moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
-webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
box-shadow:inset 0px 1px 0px 0px #f29c93;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
background-color:#fe1a00;
-webkit-border-top-left-radius:20px;
-moz-border-radius-topleft:20px;
border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
-moz-border-radius-topright:20px;
border-top-right-radius:20px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-moz-border-radius-bottomleft:20px;
border-bottom-left-radius:20px;
text-indent:0;
border:1px solid #d83526;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:10px;
font-weight:bold;
font-style:normal;
height:15px;
line-height:8px;
width:22px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #b23e35;
}
.deleteObjectBtn:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
background-color:#ce0100;
cursor: pointer;
}.deleteObjectBtn:active {
position:relative;
top:1px;
}
最后，行为:
Chrome:
Works perfectly
IE 10:
Glitchy as can be, especially with the jQuery sortable widget in place. Ultimately, I don't care about this browser (does anyone except Microsoft care about IE?). When it comes to this web-app, I am allowed to say that it is not compatible with IE.
火狐:
When you click in the textarea or text input fields, they gain focus, and the cursor blinks, however, the user is unable to reposition the cursor by clicking anywhere within the text field. Also dragging over text to highlight it is impossible. If arrow keys "up" or "down" are used, it controls the scrollbar, instead of the text cursor.
其他浏览器:
Again, I don't really care. I would like to get this to at least work in Firefox in addition to Chrome, but if it's not possible...
这是一个 jsFiddle...:
...但它看起来很糟糕，而且 sortable 不起作用，但文本字段的行为仍然像在我的环境中那样起作用，所以至少你将能够看到这一点。
有什么可能导致这种情况的建议吗？
附加信息:
不确定这是否重要，但我使用的文档类型是:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
最佳答案
如果你申请了:
$( "#sortable" ).disableSelection();
然后当您完成排序时，您将无法编辑任何输入框 – 但复选框和单选框仍然有效。
解决方法很简单:
$( "#sortable" ).enableSelection();
示例:
$("#myId tbody").sortable({
group: 'no-drop',
handle: '#id',
start: function (event, ui) {
},
stop: function (event, ui) {
}
}).disableSelection();
关于jquery - 为什么除 Chrome 之外的所有浏览器都无法编辑可排序 div 中的文本区域和文本输入字段？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19229267/