Jquery-contextMenu sortable not working in mozilla firefox

KalaiselvanMahendran commented 6 years ago

Am working on jquery context menu with menu items are sortable using jquery sortable,

This working fine in Chrome but while working on Mozilla firefox context menu item sticks on to mouse cursor while sorting.

below is my code:

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery UI Sortable - Default functionality</title>
        <link rel="stylesheet" href="css/jquery.contextmenu.css">
        <link rel="stylesheet" href="css/jquery-ui.css">
        <script src="js/jquery-1.10.2.min.js"></script>
        <script src="js/jquery-ui.js"></script>
        <script src="js/jquery.contextMenu.js"></script>
    </head>
    <body>
        <button class="context-menu-one btn btn-primary" id="rightClickBtn">right click me</button>

        <script type="text/javascript">

            $(document).ready(function() {
                $( "#sortable" ).disableSelection();

                var items = {
                    first: {
                        name: "Item 1",
                        isHtmlName: true
                    },
                    second: {
                        name: "Item 2",
                        isHtmlName: true
                    },
                    third: {
                        name: "Item 3",
                        isHtmlName: true
                    }
                }

                $.contextMenu({
                    selector: '.context-menu-one',
                    autoHide: true,
                    items: items,
                    events: {
                        show: function() {
                            $('#sortable').sortable({
                                items:'li:not(.context-menu-header)'
                            });
                        }
                    }

            });

            $('.context-menu-one').mousedown(function(e){
                if(e.button == 2) {
                    $('ul.context-menu-list').attr('id', 'sortable');
                }
            });

        });
        </script>
    </body>
    </html>

Below image is getting while working on firefox:

untitled

you can see that context menu item is stick on to mouse cursor in firefox.

bbrala commented 6 years ago

https://jsfiddle.net/bbrala/r41vue1y/7/

I've made a fiddle with what you mentioned, the line $( "#sortable" ).disableSelection(); breaks, since there is no element with that id at that point.

Other than that it seems sortable removed the item from the dom which breaks the contextmenu since it tries to trigger an event on an item that is no longer there.

I won't be fixing this interaction, the menu doesn't really support removing its elements like that.

bbrala commented 6 years ago

Closing due to inactivity.

swisnl / jQuery-contextMenu

Jquery-contextMenu sortable not working in mozilla firefox #587