I'm having an Issue that I'm trying to apply draggable to some a popup element of an external library (I can't modify them).
The problem is that, the most outer div of this popup is actually slightly outside it and has 0 height (its an arrow shaped div, its kinda like a dialog balloon), so it doesn't properly works with the containment.
I could just chose the inner element as a selector (which is the actual popup bounding box), but then the arrow element will not move with the popup.
As stated, I can't modify these elements in a way of grouping them togheter (Actually I don't even have access to the source, doing it in developer console), so how can I solve this? I would like to keep using JQuery UI, but if not possible I'm open to alternatives.
I've tried multiple selectors, but it won't move the arrow div :
$( ".dialogArrow, #popupDiv" ).draggable({ scroll: false }); Example code :
<div class="dialogArrow" style="height:0; width: 100%; background: red">I'm the parent but my hitbox is wrong <div id="popupDiv" style="height: 200px; width: 200px; background: green">actual hitbox</div> <div>i need to move togheter too</div> </div> JSFiddle : https://jsfiddle.net/hvkh7mmq/5/
1 Answers
Answers 1
You can make use of the handle option (demo). Like so:
$(function() { $(".dialogArrow").draggable({ handle: "div#popupDiv", scroll: false }); }); Working example: https://jsfiddle.net/Twisty/hvkh7mmq/3/
I did not see a point to your selector, since you want to drag the parent element, not assign .draggable() to both elements. Since the parent has no render-able HTML, it can't be clicked upon in essence. So using the handle option, we can specify something that can be clicked.
Additional
If you inspect the element after dragging, you will see something like:
<div class="dialogArrow ui-draggable" style="height: 0px; width: 100%; background: red none repeat scroll 0% 0%; position: relative; left: 107px; top: 30px;"> <div id="popupDiv" style="height: 200px; width: 200px; background: green; cursor: inherit;" class="ui-draggable-handle">actual hitbox</div> <div id="other div that needs to move togheter"></div> </div> The structure is not changed. All 3 elements are moved.
0 comments:
Post a Comment