jQuery UI Widgets Forums Plugins Validator, Drag & Drop, Sortable show draggable element outside jqxPanel

This topic contains 4 replies, has 2 voices, and was last updated by  Anthony Chan 4 years ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • Anthony Chan
    Participant

    How can a draggable element be shown when dragging outside a scrollable jqxPanel?

    See this example where the button when dragged is visible only inside the panel.

    <html lang="en">
      <head>
        <script type="text/javascript" src="jquery/jquery.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/jqxdragdrop.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
      </head>
      <body>
        <div id='one' style='background:red;'></div>
        <script>
    $("#one")[0].innerHTML="<table><tr><td><button id='dragme'>" +
      "drag me</button></td></tr><tr><td>new row</td></tr></table>";
    $("#one").jqxPanel({width:200,height:28});
    $("#dragme").jqxDragDrop({
      dropAction: "none",
      dropTarget: $(document.body),
      onTargetDrop: function() {console.log("dropped")}
    });
      </script>
    </body>
    </html>
    

    Christopher
    Participant

    Hi Anthony Chan,

    you need to set the “oveflow” property of the panel to “visible” in order to see the element while dragging it outside of it’s parent. Here is the solution you need applied to your code sample:
    https://www.jseditor.io/?key=jqwidgets-dragdrop

    Best Regards,
    Christopher

    jQWidgets Team
    http://www.jqwidgets.com


    Anthony Chan
    Participant

    Thanks, but this does not work. When you set overflow visible on the scrolling panel, it no longer displays correctly.

    In my example, the height of the jqxPanel was set to 28. In your copy of it, you changed that to 280. Revert to 28 and you will see that outside the panel are the words “new row”, which should only be shown when the panel is scrolled.


    Christopher
    Participant

    Hi Anthony Chan,

    I understand you completely, but unfortunately it’s not possible to see the dragged object outside if it’s parent. There are two ways to do it:
    1) Change the height of the jqxPanel so the elements are visually in it and use “overflow:visible” to see the elements when they are being dragged outside of the parent(the jqxPanel).
    2) Create the draggable object outside of the jqxPanel so they are not limited to the jqxPanel view.

    Best Regards,
    Christopher

    jQWidgets Team
    http://www.jqwidgets.com


    Anthony Chan
    Participant

    OK, so what I asked cannot be done.

    However, I think the request is reasonable and should be supported in future, thanks.

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

You must be logged in to reply to this topic.