jQWidgets Forums

Tagged: coordinates, drag, dragging, item, jqxdragdrop

This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 11 years, 1 month ago.

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

Author

getting coordinates while dragging Posts

March 31, 2014 at 3:09 pm getting coordinates while dragging #52263

priyam.basu

Participant

Hi,

Is there a way of getting the coordinates(like a tooltip) When you are dragging the item around in the target area?

Thanks!

April 1, 2014 at 5:25 am getting coordinates while dragging #52276

Dimitar

Participant

Hello priyam.basu,

This can be achieved by binding to the event dragging:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#events').jqxPanel({ width: 260, height: 330 });
            $('#draggable').jqxDragDrop({ restricter: 'parent', dropTarget: '.drop-target' });

            $('#draggable').bind('dragging', function (event) {
                addEvent(event.type, event.args.position);
            });

            function addEvent(type, position) {
                $('#events').jqxPanel('prepend',
                    '<div class="row">Event: ' + type + ', (' + position.left + ', ' + position.top + ')</div>'
                );
            }

            (function centerLabels() {
                var labels = $('.label');
                labels.each(function (index, el) {
                    el = $(el);
                    var top = (el.parent().height() - el.height()) / 2;
                    el.css('top', top + 'px');
                });
            } ());
        });
    </script>
    <style type="text/css">
        .row
        {
            padding: 1px;
        }
        .draggable
        {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 100px;
            height: 100px;
            left: 30px;
            top: 50px;
            padding: 5px;
            z-index: 2;
        }
        #draggable-parent
        {
            background-color: #eeffee;
            width: 350px;
            height: 350px;
            text-align: center;
            border: 1px solid #eee;
            float: left;
        }
        .main-container
        {
            width: 650px;
            z-index: 0;
        }
        .events
        {
            float: right;
            padding: 10px;
            font-family: Tahoma;
            font-size: 13px;
        }
        .label
        {
            position: relative;
            font-family: Verdana;
            font-size: 11px;
            color: #000;
        }
        .drop-target
        {
            background-color: #FBFFB5;
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            margin-left: 190px;
            margin-top: 70px;
            z-index: 1;
        }
    </style>
</head>
<body class='default'>
    <div class="main-container">
        <div id="draggable-parent">
            <div id="draggable" class="draggable">
                <div class="label">
                    I can be dragged only inside my parent</div>
            </div>
            <div class="drop-target">
                <div class="label">
                    I'm a drop target</div>
            </div>
        </div>
        <div id="events" class="events">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

April 1, 2014 at 12:22 pm getting coordinates while dragging #52331

priyam.basu

Participant

Hi Dimitar,

i dont want the coordinates in a panel. I want them on the item that i’m dragging. Is that possible?

Thanks!

April 2, 2014 at 5:20 am getting coordinates while dragging #52371

Dimitar

Participant

Hi priyam.basu,

Yes, it is possible. Here is a modification of the previous example:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#events').jqxPanel({ width: 260, height: 330 });
            $('#draggable').jqxDragDrop({ restricter: 'parent', dropTarget: '.drop-target', feedback: "original" });

            $('#draggable').bind('dragging', function (event) {
                addEvent(event.type, event.args.position);
            });

            function addEvent(type, position) {
                $('#draggable').html('<div class="row">Event: ' + type + ', (' + position.left + ', ' + position.top + ')</div>');
            }
        });
    </script>
    <style type="text/css">
        .row
        {
            padding: 1px;
        }
        .draggable
        {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 100px;
            height: 100px;
            left: 30px;
            top: 50px;
            padding: 5px;
            z-index: 2;
        }
        #draggable-parent
        {
            background-color: #eeffee;
            width: 350px;
            height: 350px;
            text-align: center;
            border: 1px solid #eee;
            float: left;
        }
        .main-container
        {
            width: 650px;
            z-index: 0;
        }
        .events
        {
            float: right;
            padding: 10px;
            font-family: Tahoma;
            font-size: 13px;
        }
        .label
        {
            position: relative;
            font-family: Verdana;
            font-size: 11px;
            color: #000;
        }
        .drop-target
        {
            background-color: #FBFFB5;
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            margin-left: 190px;
            margin-top: 70px;
            z-index: 1;
        }
    </style>
</head>
<body class='default'>
    <div class="main-container">
        <div id="draggable-parent">
            <div id="draggable" class="draggable">
                <div class="label">
                    I can be dragged only inside my parent</div>
            </div>
            <div class="drop-target">
                <div class="label">
                    I'm a drop target</div>
            </div>
        </div>
        <div id="events" class="events">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.