I'm new to angular. I'm creating vertically split panel with "drag handle" to adjust top and bottom tree panel. I've implemented three stages toggle but I'm not be able to execute dragging of height of the div with mouse event vise-versa. I do not want to use renderer or HostListener or ng-split directive maybe with custom function/method would be nice. can anybody look at my code and help me out. here's what I've done so far.
https://stackblitz.com/edit/angular-hm4zy9?file=src%2Fapp%2Fapp.component.html
My suggestion is to subscribe to drag event, also do not forget to add draggable="true" to your draggable element. The calculations seem to be correct from the first sight. Check the demo, I've changed just a bit of your code
Related
I made a div draggable with $("#divID").draggable(); and it works.
Inside this div I have a second div. I'd like to have the inner div not draggable,
so that the user can drag the whole thing using a "frame" around the inner div.
The inner div contains a ScrollBar and other elements that conflict with the "draggable" feature.
Is it possibile?
Thank you.
Edit:
I made a test page: TEST
The user should be able to drag everything (including "other elements") only in the upper or lower strip, where the cursor become a cross of arrows. I want the user to be unable to drag where the cursors become a pointer.
Thanks again.
I had a vaguely similar issue when working with accordions, I wanted links in the accordion headers and they conflicted with the accordion behaviour.
I fixed it by attaching an event handler to the inner element, and all it did was call evt.stopPropagation() to prevent the parent element(s) from getting the conflicting events.
Try position fixed
div#notDraggable{
position:fixed;
}
I'm working on a menu you can arrange by dragging and dropping menu items on top of eachother. Dropping an item ontop of another should create a submenu and when dropping it on the left/right/top/bottom it should place it accordingly.
To "detect" which direction the menu should be placed, I was thinking of adding overlays to the menu item like so (pardon my painting skills):
The red boxes are the overlay divs I want to add.
My question is: is this the right way to do? Or would a javascript solution with some sort of mouse coordinates in relation to the menu be better? What method would you use (can be any, not just the two I pointed out)?
You can use the library JQuery UI to sort and drag&drop.
If the item is located exactly above the other, you need to add it to the item.
I would go for checking mouse events and their coordinates to keep the markup and domtree clean.
You can use Knockout.js with some modification.
Check this article. Looks like it might help You.
You migh also chectk out this github project.
I'm hoping somebody is able to point me in the right direction with what I'm hoping to achieve. I'm building a responsive site, and have a traditional navigation menu spanning the top, with several items inside.
I need for this menu to shrink when the page gets narrower, but rather than the navigation menu breaking I would like for the items that don't fit to go underneath a "More..." drop down tab. Does this make sense? Here's a graphical representation...
So the top image would be what it might look like with 1024 width, and below is the 768 width.
The content in the menu is unknown so the widths would vary, so I'd need to calculate the width of the combined links and then anything more than that would get put underneath the More.. dropdown.
Any tips would be greatly appreciated, just not sure where to start at the moment.
Thanks
Implementing this is quite simple, if the menu can be static and doesn't have to adjust when the window is resized; #skip405's example is a really good solution in this case (+1).
If the implementation has to adjust the menu dynamically on window resize, it get's tricky though... The window.onresize event is fired quite often while the user scales the browser window, so a naive implementation (e.g. #skip405's approach executed on every event) would be too slow/expensive.
I'd solve the problem as follows:
Calculate and add up the outer width of all links at the beginning.
Append all available links to the "more" tab (cloning) so they can be shown/hidden dynamically. This is much faster than creating new (resp. destroying) DOM elements all the time.
Bind a handler to the onresize event. In the handler, get the current menu width and compare it to the width of the links. Hide all links that don't fit in the menu and show their counterparts in the "more" tab. The same goes the other way round for showing links if the menu is wide enough.
Here's my implementation: http://jsfiddle.net/vNqTF/
Just resize the window and see what happens. ;) Note that the solution can still be optimized of course - it's just an example.
Here's a nice jQuery plugin that may solve the problem: https://github.com/352Media/flexMenu
Also be sure to check out a great article providing a step-by-step instructions on how to organize this kind of flexible navigation using the aforementioned flexMenu plugin: http://webdesign.tutsplus.com/tutorials/site-elements/a-flexible-approach-to-responsive-navigation/
I think my variant may be a starting point for you. I'm a novice in jQuery and am learning a lot myself - so anybody, feel free to correct (and improve) my method or my logic :)
My starting point is here: http://jsfiddle.net/skip405/yN595/1/
To see it in action you need to resize the Result window so that there were 3 or 4 items in a row (not 7) and press Run again. Hover over More to see the rest of them.
In this fiddle I calculate the width of the list items in a loop and compare it with the width of the whole menu. When the calculated width of the items becomes higher than that of the menu - we can get the number of visible lis at the moment.
NB: This code works on document.ready and won't work on resizing of the window yet. So press Run when you resize the window for now.
I am utilizing jQuery's draggable functionality. The viewport div is the entire window size. There is a draggable container div within the viewport which is much larger than the viewport itself giving the feel of looking through a window to see small portions of the container. The container holds object divs which are also draggable.
Currently, I have the container div dragging properly and I have the object divs dragging around the viewport div properly as well. The issue I am having is I want to "push" the viewport around if an object div comes within a particular pixel range of the edge of the viewport div.
JQuery's draggable function has a drag event which I have been trying to utilize on the objects. I can get the viewport to scroll but, it requires the mouse keep the object moving at all times to keep the scroll going. I am looking to have the object get within the pixel range and be able to not move the mouse but, still scroll. I am at a loss at the moment as I cannot seem to find any solution that really fits my requirements. Any help would be greatly appreciated and rewarded with my gratitude.
To see an example of what I am doing, please visit http://jsfiddle.net/trVZA/10/. When the red box is dragged, the black object will drag around. I have commented out my code on the drag event for the object as it will completely freeze the browser but, it is there for you to see my mistake. When the object gets close to a wall I want the background water image to scroll around.
I'm trying to build an interactive map and I'm looking for information on how to have a click and drag in one window, affect an image in its parent window.
As this is hard to explain if you visit http://liamg.co.uk/map/map.html you will see a small window/map in the top left, Id like to be able to drag a small window around the map and have that move the larger/zoomed in image, does this make sense?
Any information/help is greatly appreciated!
jquery supports drag n drop elements, see here: http://jqueryui.com/demos/draggable/
you have to set the right boundaries, and then add an event that performs on drop in which you will read the position of the dropped element and can then apply it to the map however you want to.
The right example you want is this: http://jqueryui.com/demos/draggable/constrain-movement.html
The first one in the box has the boundaries of the box.
And here you see how to react on the drop: http://jqueryui.com/demos/draggable/events.html
I think what you need is not exactly a drag event, you want a element moving only inside the little map, yeah?
Let me explain:
1- Add a listener to mouse down, up and move to that little map;
2- When flag mousedown is true, mousemove works changing a position of a square div around the little map (showing what portion of image the user is seeing). Use pageX and Y (coordinates);
3- Make the math by size of the portion div and size of the big overflowed with the full map to show the exactly zoomed portion of the map.
I belive drag is really implemented when your move a think around all the document, or using the drop event. But it's what I think.