Bug with Drag and Drop between lists - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 2 replies, has 2 voices, and was last updated by wavetrex 11 years, 2 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Bug with Drag and Drop between lists Posts

July 4, 2013 at 3:52 pm Bug with Drag and Drop between lists #24517

Participant

– Latest jqWidgets 2.9.2
– jQuery 1.8.3
– All browsers.

When one list has become completely empty, it’s not possible to drop to it anymore effectively disabling drag & drop functionality
(which also breaks the listbox from which an item is dragged, because that item will remain “suspended in air”)

The exception message in console is:
Error: Invalid jQuery Selector – #listBoxContent .draggable! Please, check whether the used ID or CSS Class name is correct.

Note: It’s not possible to replicate in your demo directly because both lists have an item that cannot be removed, but if “Frappucino” on the rights side is removed, the effect happens in the demo as well.

—
Second small bug related to Drag and Drop between lists or reordering in a list:

When those two lists are initialized hidden (for example, in a hidden tab or window waiting to be displayed), it’s not possible to Drag and Drop or Reorder on Internet Explorer 8 ( Windows XP ). You can drag, but drop has no effect. It works well on the more modern browsers, including IE9

The example on the Demo site works because those lists are placed simply on the main page, in visible DIVs.

Can you check please?
Thanks !

Wave

July 4, 2013 at 3:54 pm Bug with Drag and Drop between lists #24518

Peter Stoev

Keymaster

Hi,

To initialize the lists correctly in a Tab or Window, please use the “initTabContent” and “initContent” callback functions of jqxTabs and jqxWindow. That should resolve your issue.

Btw. I also tried to reproduce it by modifying our sample and hiding the ListBox during its initialization. It worked well in IE8 and even in IE7 in my tests. Below is my test code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getDemoTheme();
                var data1 = [
                    "Affogato",
                    "Americano",
                    "Bicerin",
                    "Breve",
                    "Café Bombón",
                    "Café au lait",
                    "Caffé Corretto",
                    "Café Crema",
                    "Caffé Latte",
                    "Caffé macchiato",
                    "Café mélange",
                    "Coffee milk",
                    "Cafe mocha"
		        ];
                var data2 = [
                    "Cappuccino",
                    "Carajillo",
                    "Cortado",
                    "Cuban espresso",
                    "Espresso",
                    "Eiskaffee",
                    "The Flat White",
                    "Frappuccino",
                    "Galao",
                    "Greek frappé coffee",
                    "Iced Coffee",
                    "Indian filter coffee",
                    "Instant coffee",
                    "Irish coffee",
                    "Liqueur coffee"
                ];
                $("listBoxA").hide();
                // Create a jqxListBox
                $("#listBoxA").jqxListBox({ allowDrop: true, allowDrag: true, source: data1, width: 200, height: 250, theme: theme,
                    dragStart: function (item) {
                        if (item.label == "Breve")
                            return false;
                    },
                    renderer: function (index, label, value) {
                        if (label == "Breve") {
                            return "<span style='color: red;'>" + label + "</span>";
                        }
                        return label;
                    }
                });
                $("listBoxA").show();
                $("#listBoxB").jqxListBox({ allowDrop: true, allowDrag: true, source: data2, width: 200, height: 250, theme: theme,
                    dragEnd: function (dragItem, dropItem) {
                        if (dragItem.label == "Frappuccino")
                            return false;
                    },
                    renderer: function (index, label, value) {
                        if (label == "Frappuccino") {
                            return "<span style='color: red;'>" + label + "</span>";
                        }
                        return label;
                    }
                });
                $("#listBoxA, #listBoxB").on('dragStart', function (event) {
                    $("#dragStartLog").text("Drag Start: " + event.args.label);
                    $("#dragEndLog").text("");
                });
                $("#listBoxA, #listBoxB").on('dragEnd', function (event) {
                    $("#dragEndLog").text("Drag End");
                    if (event.args.label) {
                        var ev = event.args.originalEvent;
                        var x = ev.pageX;
                        var y = ev.pageY;
                        if (event.args.originalEvent && event.args.originalEvent.originalEvent && event.args.originalEvent.originalEvent.touches) {
                            var touch = event.args.originalEvent.originalEvent.changedTouches[0];
                            x = touch.pageX;
                            y = touch.pageY;
                        }
                        var offset = $("#textarea").offset();
                        var width = $("#textarea").width();
                        var height = $("#textarea").height();
                        var right = parseInt(offset.left) + width;
                        var bottom = parseInt(offset.top) + height;
                        if (x >= parseInt(offset.left) && x <= right) {
                            if (y >= parseInt(offset.top) && y <= bottom) {
                                $("#textarea").val(event.args.label);
                            }
                        }
                    }
                });
            });
        </script>
        <div id='jqxWidget'>
            <div style="float: left;" id="listBoxA">
            </div>
            <div style="margin-left: 20px; float: left;" id="listBoxB">
            </div>
            <div style="width: 200px; height: 200px; float: left; margin-left: 20px;">
                <textarea rows="5" id="textarea"></textarea>
            </div>
            <div style="font-size: 13px; font-family: Verdana; padding-top: 20px; clear: both;">
                <b>Events Log:</b>
                <div id="dragStartLog">
                </div>
                <div id="dragEndLog">
                </div>
                <br />
                <b>Note:</b>
                <br />
                Dragging of "Breve" is disabled.
                <br />
                Dropping of "Frappuccino" is disabled.
            </div>
        </div>
    </div>
</body>
</html>

For the other issue, we will check whether there is such behavior or not.

We will also appreciate if you provide a sample which illustrates the reported behaviors.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 4, 2013 at 5:48 pm Bug with Drag and Drop between lists #24523

wavetrex

Participant

Thank you for responding !

I will experiment with your code and will provide a code sample similar to what my application is doing.
It is kinda hard to extract the code directly because those drag-and-drop lists are part of a complex module with over 40 jqWidgets in it but I’ll try to build a simper and clearer sample which exhibits this problem.

—
As for the other issue, thanks for checking !

Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.