Response title
This is preview!
jquery-ui draggable help
in Using jQuery UI
•
7 years ago
I've made a div draggable using jquery-ui and I'm trying to
customize it in a few ways but it doesn't go well.
What I want
to do is make it so the div won't go over the scrollbar of the
browser, I've constrained it to the window object as well as to
the document object but neither succeeded.
This is my code :
- $(function() {
- var container = $("#context-menu-container");
- var header = $("#context-menu-header");
- var options = $("#context-menu-options");
- var steps = $("#context-menu-steps");
- container.draggable({
- containment: "window",
- cursor: "move",
- cursorAt: {left: 80, top: 21},
- drag: function(event, ui) {
- header.css({left: ui.offset.left, top: ui.offset.top});
- options.css({left: ui.offset.left, top: ui.offset.top + header.height()});
- steps.css({left: ui.offset.left, top: options.offset().top + options.height()});
- },
- handle: header
- });
- $(window).resize(function() {
- var doc = $(document);
- if (container.offset().left + container.width() > doc.width()) {
- var leftPos = doc.width() - container.width();
- container.css({left: leftPos});
- header.css({left: leftPos});
- options.css({left: leftPos});
- steps.css({left: leftPos});
- }
- if (container.offset().top + container.height() > doc.height()) {
- var topPos = doc.height() - container.height();
- if (topPos >= 0) {
- container.css({top: topPos});
- header.css({top: topPos});
- options.css({top: topPos + header.height()});
- steps.css({top: options.offset().top + options.height()});
- }
- }
- });
- });
As you can see the container is what being dragged and is
dragging with him some other divs which are positioned on top of
him. What I want you to take a look beside the scroll-bar issue is
the fact that Im using a handle which is essentially a div on top
of the draggable div. I'm having some problems with it as
well. As you can see I've hooked the re-size event on the
window object to make sure that if the window is re-sized (user
manually re-sizing / user open developer console) so the whole
construct will be re-positioned inside the window so it won't
get stuck (it's position is set to fixed in the css file).
Also you can note that in this even hooking function I check
- if (topPos >= 0)
To make sure that even if the whole construct is hidden, say by
the developer console, move it upwards ONLY if it's top position
WILL BE ABOVE 0 and I do it because the handle is on the most top
part of the draggable div, if I wouldn't do it then it would be
hidden and I wouldn't be able to drag the construct anymore.
Now, the problem is that this check works and if I open the
developer console and the resize event hook function is being called,
it's checking if the new Y position of the construct will be below
0 and if it is it won't move it like expected, but if I were to
drag the construct then, it's bottom part will snap to the top
part of the developer console, resulting in the top part (the handle)
to be hidden and then stack there until refresh, so I don't know
how to solve this problem.
Also, if there's any native approach that jquery/jquery-ui
offers to solve the problem with the window re-sizing without hooking
the event and doing all these checks manually, please tell me :)
JSFiddle :
The window re-sizing problem is easy to reproduce in JSFiddle, just
open developer console and then try to drag the construct and see how
the handle is being hidden and stack. The scroll-bar problem can't
be shown on JSFiddle because even if I add elements to force the
scroll-bar to show up, the construct won't overlap the scroll-bar
on the JSFiddle example but inside a real page IT WILL.
1