jQuery UI Widgets Forums Plugins Validator, Drag & Drop, Sortable DragDrop dropTarget Question

Tagged: 

This topic contains 5 replies, has 2 voices, and was last updated by  dishmann 2 months, 3 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • DragDrop dropTarget Question #106493

    dishmann
    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

    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

    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

    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.

    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

    DragDrop dropTarget Question #106529

    dishmann
    Participant

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

    Thank you

    dishmann

    • This reply was modified 2 months, 3 weeks ago by  dishmann.
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.