Can this be done in jQuery or any other tool? I have a top menu with tabs. When a tab is clicked the page loads below the top menu. I want to drag a menu tab into the section below the menu. This shouldn't move the tab, but it should trigger a function that I can use to manipulate the html.
Thanks!
Yes there are plugins that offers this functionality, I think most of the drag and drop jQuery plugins has their own callback function that triggers once the dragging and dropping has finished. jQuery List DragSort is a plugin I've used in my project before, it's lightweight and easy to use.
$("menu").dragsort({dragEnd: showHiddenCells });
function showHiddenCells() {
//triggers after the user drops the element
}
Thanks Mark,
I got it working with jQuery using draggable and droppable.
Using the menu item id's I can make the manu itmes draggable and still not move them by using the revert option.
$( "#menuItem1" )
.draggable( { revert: true, helper: "clone" } );
In the area below the menu I made a droppable section. Using the "drop" event handler I can fire off some action when the draggable item is dropped into the droppable item.
$('#dropArea').droppable({
drop: function( event, ui ) {
do something here;
}
});
Related
I'm trying to create a top-nav menu as follows:
The idea is that when you click a tab, the tab itself gets highlighted in black and an associated menu shows up beneath it. This works fine.
I also want the menu to disappear and the tab to be unhighlighted if the mouse leaves either the tab or the menu. This is where I'm running into trouble. At the moment, the JQuery I use to handle this is roughly as follows:
$('.item-support a').click(function(e){
// removeClass('curr') from all other tabs
$('.item-support').addClass('curr');
$('#submenu-support').fadeIn('fast');
$('.item-support').mouseleave(function(e) {
$('.item-support').removeClass('curr');
$('#submenu-products').fadeOut('fast');
});
}else{ // Click again
$('.item-support').removeClass('curr');
$('#submenu-support').fadeOut('fast');
}
return false;
});
$('#submenu-products').mouseleave(function(e) {
$('.item-support').removeClass('curr');
$('#submenu-products').fadeOut('fast');
});
// Similar code for the other tabs
The problem is that the mouseleave events for the tab and sub-menu are not synchronized. So, for example, if the mouse leaves the support tab and enters the submenu below it, the submenu vanishes. I've tried many different approaches to get around this and even have one that crudely works using pageX and pageY co-ordinates, but I'm looking for a more elegant solution. How do I get the tab and its associated submenu to work in tandem? Is there a way to bind the two divs together? Or make mouseleave recognize an exception when entering a certain div?
You can check if either element is hovered, and do something like this:
$('.item-support, #submenu-support').mouseleave(function() {
setTimeout(function() {
if (!$('.item-support').is(':hover') && !$('#submenu-support').is(':hover')) {
$('.item-support').removeClass('curr');
$('#submenu-support').hide();
}
}, 50);
});
You also shouldn't bind your mouseleave event in the callback of another event. Currently every time you click item-support, you are binding another mouseleave event to it.
I am using this menu (http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/) in my website and I modified it slightly. Instead of using the button to show and hide the menu I want to show the menu when the mouse enters a region of the menu and disappears when the mouse leaves the menu. I managed to achieve showing the menu on mouseenter, however, whenever hovering over a child the menu just keeps showing and hiding itself. The JS code can be seen in the snippet below.
showLeft.onmouseover = function() {
classie.toggle( this, 'active' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
};
I made some research and from what I understood is that this phenomenon is referred to as 'bubbling' and I tried filtering the trigger of the event by the source of the event however I was not successful. Any help would be greatly appreciated.
Yes, this is caused by event bubbling as you identified.
The simplest way to solve your problem is to use jQuery, which specifically handles this case through its mouseenter/mouseleave events.
$(elem).on("mouseenter", function() {
// your code
});
I am trying to create a dropdown javascript menu with jquery. I am using hide() and show(). I made it so that when you click on a menu item it shows but I cannot figure out how to make it so that when you click on anything other than the menu it will hide. I have seen it done on multiple sites before. How do you do it?
The gist of it:
// variable menu is your jquery menu ref.
var outsideMenu= function(){
menu.hide();
// clean up listener
$(document).unbind('click', outsideMenu);
}
$(menu).mouseout(function(){
// cursor is off the menu so attach listener
$(document).click(outsideMenu);
}).mouseover(function(){
// back to menu, so remove listener
$(document).unbind('click', outsideMenu);
});
I assume you can take it from there ;)
This may be what you're looking for.
I need to know how to detect the position of a dragged item as opposed to other divs. I need to detect whether an item is dropped outside of two different divs. (I am building a mac dock type start page and I need to know how to do this so I can delete icons by dragging them off the bar.)
Any help would be greatly appreciated.
You can use a combination of draggable and droppable from jquery ui. Set your toolbar as droppable and your icons as draggable like this:
var deleteClass = 'deleteMe';
$('div.toolbar').droppable({
out:function(event, ui){
ui.draggable.addClass(deleteClass);
},
over:function(event,ui){
ui.draggable.removeClass(deleteClass);
}
});
$('div.icon').draggable({
helper:'clone',
revert:'valid',
opacity:.5,
stop: function(event,ui){
if($(this).hasClass('deleteMe')){$(this).fadeOut();}
}
});
Basically the work is in the events. Out and over events of the droppable toolbar add and remove a class on the icon that we can use as a flag to know when the icon is not over the toolbar. The stop event on the draggable icon then lets us remove the icon if it is not over the toolbar. You can try it out with this jsFiddle. I'm sure the same could also be done using the jquery ui sortable widget so you could also let your users re-arrange icons if they want.
I am running thickbox and jquery ui draggable both on the same page, and they are conflicting.
Jquery UI Draggable allows me to drag and drop things from one place to another with this code:
$(".droppable").droppable({
drop: function(ev, ui) {
do stuff
}
});
Thickbox starts on a click event, with essentially this code:
$(".thickbox").click(function(){
thickbox functions...
});
But because the thickbox link is inside the draggable div, it opens the thickbox when I drag the link!! Hence, the problem.
How can I change this code so that:
When I drag the link, it doesn't open thickbox.
When I click the link(without dragging), it opens thickbox.
Thanks!
Check if the element is being dragged before showing thickbox.
or disable thickbox event handler when dragged.
eg:
$(".thickbox").mouseup(function(){
if (is_being_dragged()) return;
// thickbox functions...
});
is_being_dragged() would have to check a flag set by the drag function. The drag function should unset the drag flag after it has completed.
You can also solve this independently of the drag function you're using by making the click function be a onmousedown, followed by onmouseup.
$(".thickbox").mousedown(function(){
this.__down = new Date().getTime();
});
$(".thickbox").mouseup(function(){
var interval = new Date().getTime() - this.__down;
// assume dragged if it was pressed 50 millisecs or more ago
if (interval > 50) { return }
});
It is assuming a drag takes more then 50 millisecs and a click is less. You can see what works best in your case.