I have several list items with their parent ul delegated as the node for Dragdrop, this works fine by itself - it drags, it drops.
In the Droptarget, I have a DOM's worth of nodes which subscribe to mouseenter/leave events (I've yet to delegate that behaviour to a container, if its possible/effective). This also works fine, mousenter/leave events fire when I enter and leave each element.
The problem though, is when I am in the middle of a drag operation, and I drag over the Droptarget - which is the correct place for me to be aiming at. What I want is the mousenter/leave targets to continue to fire (because the element hovered over adds a border and background - so you can see what you're hovered over).
The result is the ability to drag a node over the Droptargets' nodes and have those nodes 'highlight' (with border as above) via mousenter/leave, and then I can drop.
So again, both work fine separately, but in unison the mousenter/leave events don't fire while I'm dragging. Does this have something to do with bubbling?
The above code is spread across a few intricate files at the mo', right in the middle of an application, but if the above is not understandable - let me know and I will paste some code.
thanks,
d
MAJOR EDIT:
Ooook. I was waaay off the mark. I do in fact have this working correctly - almost exactly the way I want. The problem is... the nodes being hovered while dragging are somehow positioned from top-left of the parent document. In a nutshell, I'm dealing with a dom's worth of Nodes in an iframe, they're now all set as Drop targets for the Drag objects in the parent DOM. When dragging over the iframe, the iframe Drop targets seem to be positioned very strangely.
Here's an example page now, too: http://codefinger.co.nz/projects/fpx/mod/project/dd_test_1.html
It fairly clearly outlines what is going on - there's two sets of nodes to drop the drags onto - one set (left) in an iframe, the other set (right) in a div in the parent DOM. The stuff in the parent DOM works fine, naturally, the stuff in the iframe exhibits the bizarre positioning. To see the positioning weirdness - drag one of the 'widget' list items over ... the list of widget list items :P You'll see the iframe nodes highlight, and when you drop the widget - the iframe node's contents are set, as intended.
Bizarre.
So this question should now be:
What have I done wrong here, to get these Nodes in the iframe positioned thusly? Is it that the Nodes are somehow cloned into the parent DOM as a proxy, or something else?
Related
I have complex design that has several layers on top of each other. Problem is that if I click on object, other object that on top of it gets selected. How I can switch off visibility of my top objects while working on my bottom layer, so that they won't get in the way?
I finally found how to achieve what I wanted. Just select element that in the way and in properties remove tick from visible. Now you can design without anything obstructing your view! Just don't forget to make visible all elements before you save your work.
I have a dialog box in my application which displays a list of cards. I made a jsbin simplified version of it
http://jsbin.com/qopocej/edit?html,output
If I click on the blue outline on any of the cards a nice dialog box pops up with a short menu item in it. Particularly click on the blue outline below 'Joe' and see how the dialog box covers the current card and those surrounding it.
I need to refactor the code so that this current element in each card action is a new custom element, which brings with it all the functionality of displaying the menu dialog box. In the real application this does some ajax calls to the serve to update information.
The problem I have is that the very fact of refactoring has destroyed the way the dialog box displays. This is shown is this jsbin
http://jsbin.com/vecoxuh/edit?html,output
Click on the red box under 'Joe' and see how the dialog box is above the current card, but slips under the other cards nearby
I assume it is something to do with "stacking context", since the explicit styles that has added a z-index to each of the two dialog boxes should imply it still works, but it doesn't
The .item with an active dialog needs to be set a z-index that's higher than its siblings. The child dropdown menu's z-index is relative to that of its parents, no matter what it's explicitly set to. So if the furthermost parent does not have a z-index that enables it to overlap the other cards, none of its children will be able to do the same.
I'm creating a context menu for certain elements using a PopupPanel; the menu itself is going to be fairly large and complex. What I'm looking to do is to have a list of buttons, plus an image and some text, related to the element clicked.
My problem is that I'd like the buttons to always display directly under the clicked element, because that's convenient for the user; the issue is that when PopupPanel is near the edges of the screen, it automatically changes position to be fully visible, not aligning its left side to the element as usual. I like this behavior, but it moves the position of the buttons away.
So what I'd like to happen is: normally the buttons are on the left of the panel, the other stuff is to the right. When the panel is close to the right of the screen, I'd like the buttons to instead be on the right (and thus under the clicked element) and the other stuff on the left.
Is there a clever way to do this, either in GWT or better yet, using only CSS? PopupPanel itself doesn't seem to tell you when it's going to get flipped, sadly. The only solution I currently have is to manually check the position and width of the popup before showing it and adjust accordingly, but I'm hoping there's a better solution.
Here is what I suggest (based on my own implementation of a similar use case):
Have the position callback implementation accept references (in constructor) on:
PopupPanel element
element on which user right cliked
the content you put in the PopupPanel
Replicate (I know this not DRY but implementation is package private) the code from default position callback
When opening to the right invoke a method that changes the layout of your content (CSS based or otherwise)
I hope it helps. If you find something better let me know.
I am creating a Qt application where I need to display contents in an overlay box(Please refer to the attached image). The box needs to slide up from behind the bottom dock when a button is pressed and slide down by toggling the button. I tried with a QWidget but couldn't achieve what I wanted. Also I don't know how to list the elements in the overlay box. The elements are dynamic or changing.
The widgets stacking order is defined by their order in the QObject hierarchy tree. The first element is the bottom, and every next is on top of the previous. Children are on top of their parents, in widgets confined within their bounds, in QML free.
If you want that sliding element to appear on top of everything else, just put its parent on top of everything else.
After all it is on top of the bottom control bar, which is on top of the playlist, so you have it all worked out for you.
The same applies if you decide to do the wiser thing and use QML instead of QWidget. Animation and states are much easier there. Not to mention more specific designs.
i need some pointers here because i don't really know what to look for.
The project is in gwt and is using gwtquery.
I have this page with some elements and when the mouse overs an element it changes showing additional infos, let's call it header. When the mouse goes out of the header (which has some buttons so it need to stay visible once shown) it returns invisible.
The problem is that when the header is made visible all the elements of the page change position because my element changes in dimension. What i wish to do is to keep the element in the same position and overlap the header over everything with z-index.
It's not about GWT at first hand. It's mostly about general concepts of elements positioning and layout building for html pages. You should start from something like http://www.w3schools.com/Css/css_positioning.asp
And then find the appropriate tools in GWT framework or in third party libraries that are available.