我正在使用 JQuery v2.0.0
当我将一个框拖放到大标题框（JQuery Sortable）时，它可以正常工作。但是，当单击 JQuery Sortable 框中的放置框时，它在第一次尝试时不会触发（或工作），但在第二次尝试时会工作。
谁能解释为什么会这样？我认为蓝条背景颜色问题在这种情况下会有所不同，我可能是错的。
谢谢。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="Text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Testcase</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui-v1.10.3.themes/redmond/jquery-ui-1.10.3.custom.css" />
<link rel="stylesheet" type="text/css" href="css/jqgrid-v4.5.4/ui.jgrid.css" />
<style type="text/css">
// (Override CSS properties to make Column header be text-wrapped & vertical-aligned)
th.ui-th-column div {white-space:normal !important; height:auto !important; padding:2px; vertical-align:middle;}
// (Override CSS properties to make Group-Column-Header render better) /
.jqgridGroupColumnHeader ul { /* N/A... */ }
.JqgridGroupColumnHeader li { margin: 3px 3px 0px 3px; padding: 0.4em; padding-left: 1.5em; padding-right: 1.0em; padding-top:8px; height: 18px; list-style-type: none; display:inline-block; } /* display:inline; */
.JqgridGroupColumnHeader li span { position: absolute; margin-left: -1.3em; }
.JqgridGroupColumnHeader ul li.placeholder { padding: 0px 0px 0px 0px; height: 42px; color: #e41414; font-size: 24pt; font-weight: bold; width: 100%; text-align:center; vertical-align: middle; } /* background-color:#ff0000; */
</style>
<script type="text/javascript" src="scripts/jquery-v2.0.0.debug.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-v1.10.3.themes/redmond/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//[Drag a column]...
$('#gview_MyInventoryJqgrid_Spreadsheet tr.ui-jqgrid-labels th div').draggable({
appendTo: 'body',
helper: 'clone',
start: function (e, ui) {
ui.helper.addClass("ui-state-default ui-th-column ui-th-ltr");
ui.helper.css("border", "solid 2px #d0d0d0");
ui.helper.css("padding", "8px 14px 8px 14px");
},
cursorAt: { bottom: 1, right: 1 },
cursor: "pointer"
});
//[Drop a column]...
$('#MyInventoryJqgrid_GroupColumnHeader ul').droppable({
over: function () { $(this).addClass('ui-state-default') },
out: function () { /*$(this).removeClass('ui-state-default')*/ },
accept: ':not(.ui-sortable-helper)', // .ui-draggable .ui-element)',
drop: function (event, ui) {
var $groupingColumnUl = $('#MyInventoryJqgrid_GroupColumnHeader ul');
var groupingArrayModelName = [];
//Remove LI objects having displayed "Group Header" title...
$groupingColumnUl.find('.placeholder').remove();
//Build the grouping column name array...
groupingArrayModelName[0] = ui.draggable.attr('id').split('_').reverse()[0];
$.each(groupingArrayModelName, function (i1, o1) {
var $groupingColumnLi = $('<li></li>').attr('data-column', o1);
var groupingColumnsOld = [];
//add new html LIs string...
$('<span class="ui-icon ui-icon-close" style="display:inline-block;"></span>').click(function () {
var dataColumn2 = $(this).parent().attr('data-column');
$(this).parent().remove(); //This remove LI objects having "+" clickable icon...
$.each($groupingColumnUl[0].children, function (i2, o2) {
groupingColumnsOld[groupingColumnsOld.length] = $(o2.outerHTML).attr('data-column');
});
if ($groupingColumnUl[0].children.length === 0) { $('<li class="placeholder">Drag & drop column headers here to group</li>').appendTo($groupingColumnUl); }
}).appendTo($groupingColumnLi);
$groupingColumnLi.append(ui.draggable.attr('id').split('_').reverse()[0]);
$groupingColumnLi.addClass("ui-state-default ui-th-column ui-th-ltr");
$groupingColumnLi.css("cursor", "pointer");
$groupingColumnLi.appendTo($groupingColumnUl);
});
}
});
//[Re-arrange columns' position in "Group Columns Header" box]...
$('#MyInventoryJqgrid_GroupColumnHeader ul').sortable({
//over: function () { $(this).addClass('ui-state-default') },
//out: function () { $(this).removeClass('ui-state-default') },
items: 'li:not(.placeholder)',
sort: function () { $(this).removeClass('ui-state-default'); },
stop: function () { /*$(this).removeClass('ui-state-default');*/ },
revert: true //#,
//#axis: 'y'
}).disableSelection();
});
</script>
</head>
<body>
<div>
<div id="WebLayout2_MyInventoryJqgrid" class="GridViewForceCenterInAllWebBrowsers" style="padding-top:2px;padding-bottom:20px;">
<div id="MyInventoryJqgrid_GroupColumnHeader" class="JqgridGroupColumnHeader ui-widget-content" style="width:1022px;"><ul><li class='placeholder'>Drag & drop column headers here to group</li></ul></div>
<div style="padding-top:40px;">
<div id="gbox_MyInventoryJqgrid_Spreadsheet" class="ui-jqgrid ui-widget ui-widget-content ui-corner-all" dir="ltr" style="width: 1022px;">
<div id="gview_MyInventoryJqgrid_Spreadsheet" class="ui-jqgrid-view" style="width: 1022px;">
<div class="ui-jqgrid-titlebar ui-widget-header ui-corner-top ui-helper-clearfix"><span class="ui-jqgrid-title">My Inventory</span></div>
<div class="ui-state-default ui-jqgrid-hdiv" style="width: 1022px;">
<div class="ui-jqgrid-hbox">
<table class="ui-jqgrid-htable" aria-labelledby="gbox_MyInventoryJqgrid_Spreadsheet" role="grid" style="width:2200px">
<thead>
<tr class="ui-jqgrid-labels" role="rowheader">
<th id="MyInventoryJqgrid_Spreadsheet_StockNumber" class="ui-state-default ui-th-column ui-th-ltr" role="columnheader" style="width: 10px;">
<div id="jqgh_MyInventoryJqgrid_Spreadsheet_StockNumber" class="ui-jqgrid-sortable ui-draggable"> Stock Number </div>
</th>
<th id="MyInventoryJqgrid_Spreadsheet_Year" class="ui-state-default ui-th-column ui-th-ltr" role="columnheader" style="width: 10px;">
<div id="jqgh_MyInventoryJqgrid_Spreadsheet_Year" class="ui-jqgrid-sortable ui-draggable"> Year </div>
</th>
<th id="MyInventoryJqgrid_Spreadsheet_Make" class="ui-state-default ui-th-column ui-th-ltr" role="columnheader" style="width: 10px;">
<div id="jqgh_MyInventoryJqgrid_Spreadsheet_Make" class="ui-jqgrid-sortable ui-draggable"> Make </div>
</th>
<th id="MyInventoryJqgrid_Spreadsheet_Model" class="ui-state-default ui-th-column ui-th-ltr" role="columnheader" style="width: 10px;">
<div id="jqgh_MyInventoryJqgrid_Spreadsheet_Model" class="ui-jqgrid-sortable ui-draggable"> Model </div>
</th>
<th id="MyInventoryJqgrid_Spreadsheet_Trim" class="ui-state-default ui-th-column ui-th-ltr" role="columnheader" style="width: 10px;">
<div id="jqgh_MyInventoryJqgrid_Spreadsheet_Trim" class="ui-jqgrid-sortable ui-draggable"> Trim </div>
</th>
<th id="MyInventoryJqgrid_Spreadsheet_Mileage" class="ui-state-default ui-th-column ui-th-ltr" role="columnheader" style="width: 80px;">
<div id="jqgh_MyInventoryJqgrid_Spreadsheet_Mileage" class="ui-jqgrid-sortable ui-draggable"> Mileage </div>
</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>