jQWidgets Forums
jQuery UI Widgets › Forums › Layouts › Splitter › Splitter Interrupting Mousedown Event
Tagged: splittter mousedown event
This topic contains 5 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 9 months ago.
-
Author
-
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
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 StoevjQWidgets Team
http://www.jqwidgets.comPeter,
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
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….
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!
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 StoevjQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.