jQWidgets Forums

jQuery UI Widgets Forums Layouts Splitter Splitter Interrupting Mousedown Event

This topic contains 5 replies, has 2 voices, and was last updated by  Peter Stoev 11 years, 9 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Splitter Interrupting Mousedown Event #29866

    aoverton07
    Participant

    I am trying to use the Full Calendar jQuery Plugin inside of a splitter, and when I try to this, I lose the Drag and Drop functionality of the calendar. This doesnt happen when implementing the calendar outside of a splitter. It appears that my splitter is interrupting the mousedown-move event, as the event is grayed out but will not drag. Are there any events tied to the mousedown/click of the splitter (for example, an event to listen for a mousedown or click so the clicked panel gets focused?)

    this is the only reason I can think of as to why I can not drag and drop inside of a splitter….I can provide an example of a working calendar (outside of a splitter), and a broken calendar (inside a splitter) if necessary. Of course it would require the js and css files from Adam Shaw’s site.

    Thanks

    Splitter Interrupting Mousedown Event #29885

    Peter Stoev
    Keymaster

    Hi aoverton07,

    Our Splitter handles mouse events only in the SplitBar. We are not aware what could be the reason of conflict with other plug-in not developed by us.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Splitter Interrupting Mousedown Event #29986

    aoverton07
    Participant

    Peter,

    I have confirmed that this issue is unrelated to the third party Plugin, the splitter is inadvertently cancelling any drag and drop events inside it’s panels, please see the sample below which illustrates the simplest of drag and drop examples (taken from the W3Schools website). The drag and drop works outside of the splitter, but not inside. Inspecting the splitter panel (content area, NOT splitbar) in chrome dev tools indicates that there is indeed an event listener tied to “dragstart” and “mousemove”.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title id='Description'>
    TEST
    </title>
    <link rel="stylesheet" href="../js/jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../js/jQuery/jquery-latest.js"></script>
    <script type="text/javascript" src="../js/jqwidgets/jqwidgets/jqx-all.js"></script>
    <style type="text/css">
    #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
    #div2 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
    </style>
    <script>
    function allowDrop(ev)
    {
    ev.preventDefault();
    }
    function drag(ev)
    {
    ev.dataTransfer.setData("Text",ev.target.id);
    }
    function drop(ev)
    {
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    }
    </script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = 'classic';
    $("#testSplitter").jqxSplitter({ theme: theme, height: 400, width: 800 });
    });
    </script>
    </head>
    <body>
    <p>Drag the W3Schools image into the rectangle:</p>
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br>
    <img id="drag2" src="http://www.w3schools.com/html/img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
    <div id="testSplitter">
    <div>
    <p>Drag the W3Schools image into the rectangle:</p>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br>
    <img id="drag1" src="http://www.w3schools.com/html/img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
    </div>
    <div>
    CONTENT
    </div>
    </div>
    </body>
    </html>

    Please advise on how to workaround this issue.

    Best Regards,

    Alex Overton

    Splitter Interrupting Mousedown Event #29992

    aoverton07
    Participant

    you are able to drop a “draggable” item from outside the panel INTO the panel, but any “draggable” item inside the panel cannot be “dragged”, the drag event is started, and immediately canceled, which is why the item is not redrawn to the location of the mouse during mousemove….

    Splitter Interrupting Mousedown Event #29998

    aoverton07
    Participant

    This issue has been resolved with the latest release of jqwidgets 3.0.3 it also appears that the event listener tied to dragstart on the splitter content has been removed, thank you jqwidget team!

    Splitter Interrupting Mousedown Event #30017

    Peter Stoev
    Keymaster

    Thanks for the update! There was indeed “dragStart” handler bound to the split container. That it necessary only for the splitbar actually.

    Best Regards,
    Peter Stoev

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

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

You must be logged in to reply to this topic.