The title is pretty self explanatory.
All the demos I've found consist in dropping a div to a certain location. E.G a trashcan. I need to make a draggable div that can be dropped anywhere on the screen.
Is it possible to do this with HTML5? if not how should I do it?
It's quite straightforward really:
In the dragstart event calculate the offset between where the user clicked on the draggable element and the top left corner
Make sure the dragover event is applied to the entire document so the element can be dropped anywhere
In the drop event, use the offset you calculated with the clientX and clientY of the drop to work out where to position the element
Here's one I prepared earlier. For bonus points you can update the top and left position of the element in the dragover event, this is useful if the bit you're allowing to be dragged isn't the whole element that needs to be moved.
Related
I've used #angular/cdk/drag-drop library to implement a drag and drop functionality. It works well, however when dragging an element, the layout of dragged item (div containing mat-angular dropdowns, delete icon and drag handle) breaks.
As soon as I place the item it is back in place looking as it should (img 1), but it looks like during dragging the item loses its parent div, therefore it is not inline, as well as not retaining the same dimensions (img 2)
This is how it looks before dragging
This is how it looks during dragging
I've attempted to solve this with adding a class with required width and height + set its display property to inline flex, however it does not help.
I would like to place the child actor at an initial position within the ScrollPane, but the scrollTo() method seems to only do a scroll animation, and doesn't allow to move the child actor instantly. Using the child actor's setPosition() has no effect too.
call updateVisualScroll() after programmatically updating the scroll position
What I am trying to do is similar to an image map - in reverse. I have a large image (over 2000x2000) and want to give links to coordinates on the image. There are items in the image that I would like users to be able to jump directly to with having to scan over the whole image manually. Is this possible with either CSS or HTML by adding links to coordinates or adding anchors to the image? I would use js if that was an option as well.
Interesting. The notion of jumping to a position on a web browser window is limited in general. Here are some general possibilities, without specific implementation details:
You could treat it as a sprite image, and use JavaScript/jQuery to change the image coordinates so that the point of the image you are interested in moves to the the top left of a div positioned on the page. But the portion of the image above and to the left of that point would not be visible.
You could define it as a background image in a div, and define an invisible table or invisible fixed-position divs within that div, and link to specific divs or cells in that overlay. In this case, a y-coordinate in the image where the div or cell is positioned would probably move to the top of the browser window, but horizontal positioning would be problematic. If the div or cell you target is off the screen to the right or left, the page would shift to expose it, but I don't thing that you could guarantee where the specific x-coordinate would be positioned. Also, if the target is near the bottom of the web page, that target point will not move to the top. But this solution wouldn't require JavaScript/jQuery - it would just mean linking to element ID's on the page.
This is almost the same as #2... You could overlay the image with divs and/or a table at higher z-levels, and link to those divs or table cells.
You could use JavaScript/jQuery to position a fixed-size div with visible borders so that its upper-left corner is at the position in the image that you are interested in. I think you'd still have to link to that div in order to make sure that it is visible in the current viewport.
You should be able to lay out a form over the image and move the cursor to fields on the form. I think that the form could be transparent so that the cursor appears to be moving around on the image. But you'd need be confident that the data entry cursor is sufficiently visible on top of the image to be useful.
I have web application that design is based on divs.
I need in that application block possibility of clicking on some javascript object.
So I thinking about adding transparent div that will be positioned with z-index on level/layer where I need and will capture all clicks without passing to lower z-index objects?
How this can be done?
Use absolute positioning in that covering div. Either don't set any background or set it as rgba(r,g,b,0)
I don't think this is a good design.
I don't know if you know that, but you can add a click listener to the body element itself. Every click will bubble up to body. It's called event delegation. I believe this solves your problem.
I am trying to make a pop-up on certain elements where the <div>'s initial position is based on the mouse position. I already know how to get the <div> to appear in the same place each time but I want it to be relative to the mouse's position when it first appears. I don't want the <div> to move after it appears. Is this possible to do without using any JavaScript at all (i.e. CSS only)? If so, how please!
I do not think what you are asking is possible. The logical conclusion would be that you need a third party to retrieve the mouse position and then insert the desired element.