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

Tagged: , , , , , , , , , , , ,

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    show draggable element outside jqxPanel Posts
  • July 4, 2016 at 4:38 pm show draggable element outside jqxPanel #85559

    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>
    July 5, 2016 at 6:14 am show draggable element outside jqxPanel #85565

    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

    July 5, 2016 at 4:56 pm show draggable element outside jqxPanel #85575

    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.

    July 6, 2016 at 5:56 am show draggable element outside jqxPanel #85583

    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

    July 6, 2016 at 3:33 pm show draggable element outside jqxPanel #85584

    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.

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

You must be logged in to reply to this topic.