После Drag 'n Drop нажатие на выпадающее окно не срабатывает (или не работает) в первый раз, но работает нормально во второй раз. Почему?

Question

После Drag 'n Drop нажатие на выпадающее окно не срабатывает (или не работает) в первый раз, но работает нормально во второй раз. Почему?

0

Я использую JQuery v2.0.0

Когда я перетаскиваю "n", выпадающее поле в большой заголовок (JQuery Sortable), оно работает нормально. Но при нажатии на упакованную коробку в окне сортировки JQuery он не срабатывает (или работает) с первой попытки, но работает во второй попытке.

Может ли кто-нибудь пролить свет на то, почему это происходит? Я думаю, что проблема с цветом фона в синем баре заключается в том, что делает разницу в этом случае, я могу ошибаться.

Благодарю.

<!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="/jquery-ui-1.10.3.custom.css" />
<link rel="stylesheet" type="text/css" href="/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="/jquery-v2.0.0.debug.js"></script>
<script type="text/javascript" src="/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>

fletchsod 25 нояб. 2013, в 15:55

Источник

Теги:

jquery

jquery-ui

jquery-ui-sortable

jquery-draggable

jquery-droppable

1 ответ

Ещё вопросы

Henry Florence · Accepted Answer · 2013-11-25T12-55-00.000Z

Я думаю, что это может быть проблемой с jquery <2.0.2, когда я запускаю код с помощью jquery 2.0.3, draggables лучше ведут себя: jsfiddle.

Я использовал следующие импорты:

<link rel="stylesheet" type="text/css" href="/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="/ui.jqgrid.css" />

<script type="text/javascript" src="/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="/jquery-ui.min.js"></script>

Я проверю это и вернусь к вам. Спасибо за ответ.
Кажется, это работает лучше. Спасибо ... Теперь я должен выяснить, как заставить движение сортировки жидкости работать более плавно.