I'm using JQuery v2.0.0
When I drag 'n drop a box to the big header box (JQuery Sortable), it works okay. But when clicking on the dropped box there in the JQuery Sortable box, it does not fire (or works) on the 1st try but it works on the 2nd try.
Can anyone shed some light on why does that happen? I'm thinking the blue bar background color issue is what make the difference in this case, I could be wrong.
Thanks.
<!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>
I think this might be a problem with jquery < 2.0.2, when I run the code using jquery 2.0.3, the draggables are better behaved: jsfiddle.
I used the following imports:
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="http://hflorence.com/ui.jqgrid.css" />
<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>