DragDrop dropTarget Question - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 5 replies, has 2 voices, and was last updated by dishmann 5 years, 1 month ago.

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

Author

DragDrop dropTarget Question Posts

August 14, 2019 at 9:09 pm DragDrop dropTarget Question #106493

Participant

Hello and best regards to all.

Below is code I am using to learn and understand how to use the DragDrop plug in.
What I am trying to do is in the dragEnd handler also display the cell text of the table row where the ‘item’ was dropped.
I hope I am explaining it correctly. source code below.

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <style>
        body {
            font-family:Arial, Helvetica, sans-serif;
        }

        div {
            display:inline-block;
        }

        table {
            border: 1px solid blue;
        }

        td{
            border: 1px solid red;
        }

        .dragItem {

        }

        .dragTarget {

        }

    </style>
    <script type="text/javascript" src="../scripts/jquery.js"></script>
    <script type="text/javascript" src="../scripts/jqxcore.js"></script>
    <script type="text/javascript" src="../scripts/jqxdragdrop.js"></script>
    <script type="text/javascript">

        var onCart = false;

        $(document).ready(function () {
            $(".dragItem").jqxDragDrop({
                dropTarget: $(".dragTarget"),
                onDropTargetEnter: function (event) {
                    writelog("dropTargetEnter");
                    onCart = true;
                },
                onDropTargetLeave: function (event) {
                    writelog("dropTargetLeave");
                    onCart = false;
                }
            });

            $(".dragItem").bind('dragEnd', function (event) {
                writelog("dragEnd");
                if (onCart) {
                    var a_dropTarget = $(".dragItem").jqxDragDrop('dropTarget');
                    var dragData = $(this).jqxDragDrop('data');
                    alert("You dragged:" + dragData.itemText + " to " + this.innerText);
                }
            }); // end bind dragStart

            $(".dragItem").bind('dragStart', function (event) {
                writelog("dragStart");
                var name =this.innerText;
                $(this).jqxDragDrop('data', { itemText: name });
            }); // end bind dragStart

        });  // End doc ready

        function writelog(mssg) {
            document.getElementById("divLog").innerHTML=document.getElementById("divLog").innerHTML + mssg + "<br>";
        }
    </script>
</head>
<body>
<div id="divOutline" style="width:90%;margin:auto; border:1px solid green;">
    <div id="ListA" style="width:40%;">
        <table style="width:100%" id="tblTarget">
            <tr id="ListAItem1" class="dragTarget">
                <td >
                    Item A1
                </td>
            </tr>
            <tr id="ListAItem2" class="dragTarget">
                <td >
                    Item A2
                </td>
            </tr>
            <tr id="ListAItem3" class="dragTarget">
                <td >
                    Item A3
                </td>
            </tr>
        </table>
    </div>
    <div id="ListB" style="width:40%;">
        <table style="width:100%">
            <tr id="ListBItem1" class="dragItem">
                <td >Item B1</td>
            </tr>
            <tr id="ListBItem2" class="dragItem">
                <td >Item B2</td>
            </tr>
            <tr id="ListBItem3" class="dragItem">
                <td >Item B3</td>
            </tr>
        </table>
    </div>
    <div id="divLog" style="width:300px;height:300px;font-size:9px;overflow-y:auto;">

    </div>

</div>

</body>
</html>

Thanks

Rob

August 15, 2019 at 5:36 pm DragDrop dropTarget Question #106498

dishmann

Participant

Follow up

In reviewing the above code this morning, I realized that I “could” track the active dropTarget in the same manner as I track onCart. subsequently in the dragEnd handler I could then use the tracking variables to identify the recipient of the dragEnd if onCart is true.

Really I was asking if there was something internal to the dragdrop plugin that would tell me the dropTarget object in the dragEnd event.
If not I can add more management code to figure it out.

Always learning.

Thanks

August 16, 2019 at 1:39 pm DragDrop dropTarget Question #106506

Peter Stoev

Keymaster

Hi dishmann,

The dragEnd event brings information about the position of the target – event.args.position. By having the coordinates you can get the dropTarget object by using native API like getBoundingClientRect and checking whether the position is inside that rectangle.

Regards,
Peter

jQWidgets Team
https://www.jqwidgets.com

August 16, 2019 at 3:19 pm DragDrop dropTarget Question #106508

dishmann

Participant

Hey again.

Yep. That makes sense. OK here is an additional challenge I am facing. In the example above I am dragging synonymous items (table rows to table rows). That was easy to get working. The next phase is to use what I learned in an application. The challenge I am facing now is I am dragging a table row as in the example above to a row in a jqx tree grid.

I am not really sure how to interact with the tree grid as a dropTarget just yet. Lots of study yet to do. Does any of the jqx team have advice or better yet a sample on how to approach dragging onto a tree grid?

Thanks again.

August 17, 2019 at 12:01 pm DragDrop dropTarget Question #106512

Peter Stoev

Keymaster

Hi dishmann,

We have Drag & Drop samples with jqxGrid which is similar to the Tree Grid – https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/dragdropmultiplerecords.htm?material, https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/dragdrop.htm?material and https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/dragdropgridrecordtoform.htm?material. The second sample is for dragging items from one Grid to another, i.e the second one is a drop target. This should help in your case, too.

Regards,
Peter

jQWidgets Team
https://www.jqwidgets.com

August 19, 2019 at 7:30 pm DragDrop dropTarget Question #106529

dishmann

Participant

Thank you does not express how deep my gratitude is for the above.
but…

Thank you

dishmann

Author

Posts

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

You must be logged in to reply to this topic.