jQuery UI Widgets › Forums › Plugins › Validator, Drag & Drop, Sortable › Drag Drop Between Splitter Panels

Tagged: , , , , , , ,

This topic contains 4 replies, has 2 voices, and was last updated by  jqwidgetsdev 10 years, 7 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Drag Drop Between Splitter Panels Posts
  • August 8, 2014 at 9:16 am Drag Drop Between Splitter Panels #58163

    jqwidgetsdev
    Participant

    Hello.

    I was wondering if there is support to drag & drop a DIV elements between two jqxSplitter panels?

    If at all possible able to point me to an example on how this could be accomplished?

    Thanks.

    August 11, 2014 at 5:43 am Drag Drop Between Splitter Panels #58199

    Dimitar
    Participant

    Hello jqwidgetsdev,

    This can be achieved but you need to set the splitter panels’ overflow to visible. Here is an example:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
    <style type="text/css">
        .jqx-splitter-panel
        {
            overflow: visible;
        }
    </style>
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.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/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#jqxSplitter").jqxSplitter({ theme: 'summer', panels: [{ size: '100px'}] });
                $("#dragMe").jqxDragDrop();
            });
        </script>
        <div id='jqxSplitter' style="width: 300px; height: 150px; background-color: #FFFFAF">
            <div style="background-color: #97FFAF">
            </div>
            <div style="background-color: #E8C0AF">
                <div id="dragMe" style="width: 50px; height: 50px; background: teal; z-index: 999999;">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

    Best Regards,
    Dimitar

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

    August 11, 2014 at 5:55 pm Drag Drop Between Splitter Panels #58242

    jqwidgetsdev
    Participant

    Hello Dimitar.

    Thanks for your reply. I tried your example, when I drag the “dragMe” DIV and release it in the left DIV of the jqxSplitter, the “dragMe” DIV completely vanishes. I was expecting the DIV to “stick” at the location in the left DIV. Why doesn’t it?

    What kind of method does jqWidgets have to make the “dragMe” DIV “stick” where the DIV was released?

    Thanks for your help.

    August 12, 2014 at 5:02 am Drag Drop Between Splitter Panels #58250

    Dimitar
    Participant

    Hi jqwidgetsdev,

    The dragMe div stays after being dropped when we test the example. Are you sure you are using the latest version of jQWidgets (3.4.0) and that you have set overflow: visible to the class jqx-splitter-panel?

    Best Regards,
    Dimitar

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

    August 12, 2014 at 4:03 pm Drag Drop Between Splitter Panels #58287

    jqwidgetsdev
    Participant

    Hello Dimitar.

    I confirm the issue is resolved.

    Thank you!

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

You must be logged in to reply to this topic.