jQWidgets Forums

Tagged: dragdrop, iPad, jqxgrid, jqxtree

This topic contains 5 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 10 months ago.

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

Author

'click' event issue while using jqxTree with drag&drop Posts

April 26, 2013 at 8:28 am 'click' event issue while using jqxTree with drag&drop #20062

roach

Member

Hi,

I find an issue that on iPad Safari, while using jqxTree (allowDrag: true, allowDrop: true) in my application, the ‘click’ event for buttons is no longer valid.

I have also tried to add a button in the demo code for Drag and Drop in jqxTree and bind click event to the button, but I can never trigger the event on iPad Safari, while I can trigger it on desktop browsers.

Can you help me with above issue?

Best Regards,
Roach

April 26, 2013 at 3:07 pm 'click' event issue while using jqxTree with drag&drop #20097

Peter Stoev

Keymaster

Hi,

I am unable to reproduce the reported behavior with the current version of jQWidgets. I modified the demo and added a button. It was clickable and the alert box was displayed as expected.

<!DOCTYPE html>
<html lang="en">
<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.8.3.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/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            // Create jqxTree
            $('#treeA').jqxTree({ allowDrag: true, allowDrop: true, height: '300px', width: '220px', theme: theme,
                dragStart: function (item) {
                    if (item.label == "Community")
                        return false;
                }
            });
            $('#treeB').jqxTree({ allowDrag: true, allowDrop: true, height: '300px', width: '220px', theme: theme,
                dragEnd: function (item, dropItem, args, dropPosition, tree) {
                    if (item.label == "Forum")
                        return false;
                }
            });
            $("#treeA, #treeB").on('dragStart', function (event) {
                $("#dragStartLog").text("Drag Start: " + event.args.label);
                $("#dragEndLog").text("");
            });
            $("#treeA, #treeB").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);
                        }
                    }
                }
            });
            $("#clickme").click(function () {
                alert('Click');
            });
        });
    </script>
</head>
<body class='default'>
    <input type="button" value="click" id="clickme" />
    <div id='jqxWidget'>
        <div style='float: left;'>
            <div id='treeA' style='float: left; margin-left: 0px;'>
                <ul>
                    <li id='home' item-selected='true'>Home</li>
                    <li item-expanded='true'>Solutions
                        <ul>
                            <li>Education</li>
                        </ul>
                    </li>
                    <li>Financial services</li>
                    <li>Community</li>
                </ul>
            </div>
            <div style='float: left; margin-left: 20px;' id="treeB">
                <ul>
                    <li>Products
                    </li>
                    <li item-expanded='true'>Support
                        <ul>
                            <li>Support home</li>
                            <li>Customer Service</li>
                        </ul>
                    </li>
                    <li>Knowledge base</li>
                    <li>Forum</li>
                </ul>
            </div>
            <div style="width: 200px; height: 200px; float: left; margin-left: 20px;">
                <textarea rows="5" id="textarea"></textarea>
            </div>
        </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 "Community" is disabled.
                <br />
                Dropping of "Forum" is disabled.
        </div>
    </div>
</body>
</html>

Please, provide a sample which demonstrates your issue.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

April 29, 2013 at 4:38 am 'click' event issue while using jqxTree with drag&drop #20178

roach

Member

Hi Peter,

My code is nearly same as yours, as below,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Tree, Tree Widget, TreeView" />
    <meta name="description" content="The jqxTree displays a hierarchical collection of items. You
        can populate it from 'UL' or by using its 'source' property." />
    <title id='Description'>The sample demonstrates the Tree's drag and drop functionality.
    </title>
    <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.8.3.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/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            // Create jqxTree
            $('#treeA').jqxTree({ allowDrag: true, allowDrop: true, height: '300px', width: '220px', theme: theme,
                dragStart: function (item) {
                    if (item.label == "Community")
                        return false;
                }
            });
            $('#treeB').jqxTree({ allowDrag: true, allowDrop: true, height: '300px', width: '220px', theme: theme,
                dragEnd: function (item, dropItem, args, dropPosition, tree) {
                    if (item.label == "Forum")
                        return false;
                }
            });
            $("#treeA, #treeB").on('dragStart', function (event) {
                $("#dragStartLog").text("Drag Start: " + event.args.label);
                $("#dragEndLog").text("");
            });
            $("#treeA, #treeB").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);
                        }
                    }
                }
            });
			
			$("#test_btn").click(function(){
				alert("works");
			});
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div style='float: left;'>
            <div id='treeA' style='float: left; margin-left: 0px;'>
                <ul>
                    <li id='home' item-selected='true'>Home</li>
                    <li item-expanded='true'>Solutions
                        <ul>
                            <li>Education</li>
                        </ul>
                    </li>
                    <li>Financial services</li>
                    <li>Community</li>
                </ul>
            </div>
            <div style='float: left; margin-left: 20px;' id="treeB">
                <ul>
                    <li>Products
                    </li>
                    <li item-expanded='true'>Support
                        <ul>
                            <li>Support home</li>
                            <li>Customer Service</li>
                        </ul>
                    </li>
                    <li>Knowledge base</li>
                    <li>Forum</li>
                </ul>
            </div>
            <div style="width: 200px; height: 200px; float: left; margin-left: 20px;">
                <textarea rows="5" id="textarea"></textarea>
            </div>
        </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 "Community" is disabled.
                <br />
                Dropping of "Forum" is disabled.
        </div>
    </div>
	<div><input type="button" value="test" id="test_btn"/></div>
</body>
</html>

I also tried your code above, but it still didn’t work on iPad (iOS version 6.1.2 and 6.1.3). But on my iPod(iOS version 4.2.1), samsung tablet and android phones, it worked well.

Best Regards,
Roach

June 4, 2013 at 8:51 am 'click' event issue while using jqxTree with drag&drop #22495

roach

Member

Hi Peter,

Just update and clarification below,

I’d like to talk about the click issue on iPad. I’m getting the issue where the click event for buttons is not working on my application with jqxTree and jqxGrid.

FYI, related to jqxGrid, I’ve tried on your demo site http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/dragdrop.htm?web on iPad and found the previous/next buttons do not respond. FYI, no issues on desktop browsers.

Can you try the same link above on your iPad? And let me know if you have the same issue?

This is the issue I’m trying to explain above that needs to be fixed.

Look forward to hearing back from you soon!

Roach

June 18, 2013 at 5:24 am 'click' event issue while using jqxTree with drag&drop #23290

roach

Member

Hi Peter,

Just checking to see if you have had any time to try the below issue on an iPad:

FYI, related to jqxGrid, I’ve tried on your demo site http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/dragdrop.htm?web on iPad and found that drag & drop works but the previous/next buttons do not work – e.g. not responding.

Just FYI, no issues found on desktop browsers.

A quick reply would be greatly appreciated.

Roach

June 20, 2013 at 10:31 am 'click' event issue while using jqxTree with drag&drop #23490

Peter Stoev

Keymaster

Hi,

We found out what the issue with jqxDragDrop plug-in is and we created a work item about it. The fix will be available in the next version.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

Author

Posts

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

You must be logged in to reply to this topic.