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.
Related
I am using the jQuery UI Sortable plugin to of course allow my users to drag and drop elements in a list, on the list change I am firing an ajax call to save the ordered list.
However one user is complaining that it is quite hard to drag and drop when the list requires a scroll. So basically what I am attempting to do is instead of the hold left click to drag and then release left click to drop.
You will just left click on the element and it will become the active "drag" element and the user can move their mouse around the screen and it will follow, then on the second left click deactivate "drop" the element.
I have looked at their documentation, but I can't seem to find anything that will help me out (http://api.jqueryui.com/sortable/). Does anyone have any ideas or plugins that achieve this?
Regards
This should help you with this:
'You will just left click on the element and it will become the active "drag" element and the user can move their mouse around the screen and it will follow, then on the second left click deactivate "drop" the element.'
HTML:
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
Javascript:
$( function() {
var dragging = false;
$("#draggable").draggable();
$("#draggable").mouseup(function(e){
if(!dragging){
dragging = true;
e.preventDefault();
return false;
}
else{
dragging = false;
}
})
} );
Codepen example:
http://codepen.io/xszaboj/pen/JWbzax
I hope that is what you need.
Side note. This won't work on touch screen monitors on chrome because of different events which are fired.
In our app we want to drop from one list to over. Problem is, when there are many items in list - it's impossible to scroll when elements are dragable.
As workaround we want to disable drag-ability of elements and enable it only when user makes a long tap on an element.
$('li').bind('taphold', function (event, ui) {
console.log('taphold');
clearAll(); // clearing all other catched
$(this).addClass('catched')
$(this).draggable('enable');
});
here is jsfiddle https://jsfiddle.net/nrxaqc34/10/
So far it works, but user needs to tap once more in order to drag. And would be nice if user could start dragging right after long tap.
This answer here https://stackoverflow.com/a/9922048/582727 doesn't work on iOS.
Maybe someone has an idea.
Does it make sense to use delay option? http://api.jqueryui.com/draggable/#option-delay
$("li").draggable().draggable( "option", "delay", 2000);
Fiddle: https://jsfiddle.net/dob3uegj/
EDIT:
jqueryui-touch-punch (http://touchpunch.furf.com/) added to fiddle for smartphone simulations:
https://jsfiddle.net/dob3uegj/1/
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;
}
});
I have a site menu which sits underneath an overlying and is revealed by clicking on a button on the overlying , which slides it aside.
What I want to do is, while the site menu is open, prevent the overlying (everything but the menu button, ideally) from being interacted with.
I can do this by hiding and showing a container that sits over top of all the overlying content, but I was wondering if there's a way to just set some sort of property with CSS (best option) or javascript to disable click / touch events on the overlying . Any ideas?
You could use a JQuery modal overlay to prohibit the user from using anything else but whatever is in the modal div.
http://jqueryui.com/demos/dialog/#modal
When the menu is open, add this attribute to whatever controls you would like to disable
onclick="return false;"
Then remove the attribute when the menu is closed. This will prevent the default action from occuring.
You can do this without adding an attribute by using this code:
document.getElementById("myElement").onclick = function() { return false; }
CSS is about the look, not the behavior. So you can't enable or disable elements by applying CSS to them.
Your solution with an overlay is quite capable, i would do it this way too. Note that your overlay can be transparent or semi-transparent.
It is possible to be solved by overriding the click event with Javascript, but why bother creating a complicated solution (you'll have to redefine the onclick event on every element and then somehow set it back to normal) if you've already got a short clean solution?
As mbsurfer has already suggested, a quick way of disabling everything except your menu is to use the jQuery UI's .dialog with the modal option:
$(function() {
$( "#menu" ).dialog({
modal: true
});
});
More info in the docs: http://api.jqueryui.com/dialog/
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.