jQuery draggable helper clone event - javascript

I'm using jQuery to drag items around. The items have click events. I'd like to register clicks where the user moves the mouse a little while the button is still down, so, using mouseup instead of click is the obvious answer, but! I need to use helper: 'clone' on drag, because items are in a container set to overflow: scroll (or auto) and I need to drag(/drop) outside of that container.
So the question is, is there a way to register a mouseup event on the clone?
I'd also need access to the original item - for a colour change, let's say.
Here's an example: http://jsfiddle.net/kFBtr/
Thank you.

Yes, using delegate or live, something like this:
jQuery('body').delegate('.ui-draggable-dragging','mouseup',function(){alert('OMG!! Mouse Up')})
To access the original element, just use prev:
function(){jQuery(this).prev()}
Example: http://jsfiddle.net/kFBtr/1/

Related

Fabricjs - select object programatically for immediate movement/drag

I am able to select object programatically using fabricjs. However, it does not behave like when one selects an object using mouse click. On a mouse click, the object comes under focus, and one can, for example, drag it. However, on programatic selection, I cannot immediately move an object. An example jsfiddle:
http://jsfiddle.net/ThzXM/1/
Programmatic selection:
canvas.setActiveObject(canvas.item(0));
What I would like to ultimately achieve is this: on clicking a button, a new rectangle is added to canvas, which the user can move around before placing it on canvas - without requiring extra clicks. Is it possible to do this in a cross-browser compatible way? (I know in some browsers I can fire a mouseclick event but most disallow it.)
You have to do this. Don´t forget to call setCoords() to update the bounding box of your object.
// Set the active element
canvas.setActiveObject(canvas.item(0));
// Set left, o right,or angle... check documentation.
//Don´t forget to call setCoords() after changes.
canvas.item(0).setLeft(80).setCoords();
//Then render the canvas
canvas.renderAll()

jQuery - Is there a way to 'save' a state of dom elements (css) and revert to that saved state etc..?

I have a css menu that also does child menus etc.. the problem is, I have to create eventHandlers for for tab/jaws users. It seems when I manipulate the menu(s) with show()/hide() it mucks up the inherent css selectors and their states, so if a user wanted to do both tab and mouse move - it won't work. They either have to use all mouse or tabbing etc..
I could create more js eventhandlers for mouseovers/outs etc..but curious if it would be feasible to clone the parent elements onload, and tie-into the tabbing that when they tabbed "off" the menu, I "revert" to this saved state so then the user can use the css method of mouseover/out etc..
Does this make sense? Or is this as much work/overhead as just creating more eventHandlers for the mouse events?
Here is an example of saving and restoring a menu just as you suggested.
http://jsfiddle.net/5pvGG/
var $saved = $('#cssmenu').clone();
$('#a').click( function() {
$('#cssmenu').remove();
});
$('#b').click( function() {
$('body').prepend($saved);
});

on touchmove modify each element touched

I've been searching around for this and can't seem to find anything.
Basically I've binded a "touchmove" event (via jQuery) to a set of divs.. what I was hoping would happen is, as you drag across each div (with out touchend) the div's attr "xyz" toggles from 0 to 1 aka meaning it's been touched.
$("#itBoardFront div").on('touchmove',function(e){
$(this).attr('data-hit',1);
})
As you can assume, this is not working. Only the element that's actually being hit on and moved on is getting the data-hit =1.
I was able to solve this by catching the coordinates of the touch end positions then comparing it with each potential div's x,y,w,h.
You will need to 'touch and then move' per div. This is due to the way the events are fire on your elements. You can see this example: http://jsfiddle.net/MpJUR/6/
In each div (except the first one that took it by default) you need to click/touch first and then move in order to get the event trigger.
BTW, the event will be trigger on each 'move' to it's not efficient. You might want to catch 'touchstart' per div and/or just work with 'touchmove' on a parent elem that contain all the divs.

selecting multiple elements using shift and mouse click - jquery

Is it possible to use shift and mouse click to select multiple elements on a page using jquery?
I have several divs that i have given a tabindex to so that i can select them and can do things like delete them etc.
I want to be able to select more than 1 by holding down shift and using the mouse to click on each div and am struggling to do this.
Does anyone know how this can be done?
I did something like that some time ago, with jQuery:
$(id).click(function(event){ //Mouse Click+shift event
if(event.shiftKey){
//give some attribute that can indentify the elements of the selection
//example rel='multi-selection' or class='multi-selection'
}
});
Then you should do functions that select this elements and do whatever you need, I used this to drag multiple elements. Example if you want to delete this divs, you can for example:
function deleteMultiSelection(){
$('html').find('div[rel=multi-selection']).each(function(){
$(this).remove();
})
}
$("#button").click(function(){
deleteMultiSelection();
})
Be careful because I didn't test this code.
I have a jQuery plugin that does exactly what you want it is called finderSelect it enables Shift+Click, Ctrl+Click, Ctrl+Click+Drag and Standard Clicking on any element.
It sounds like jQuery UI Selectable is what you're after, you can try it out here.
To stay with OS conventions, they key it uses is Ctrl and not Shift, this isn't an option you can change without changing the jQuery UI code itself. It also has the feature of click and drag over elements to get a rectangular selection as well...if that's of any use.
Sure, if you are willing to do some work :)
Listen for the shift keydown, set a var that you can access from within your click handler functions, if the var is set then add that item, (or their tabindex for your current implementation) to your list of items to operate on when an 'action button' is pressed.
unset the var when you get the shift keyup event.
To be honest, the Ctrl + left click for selecting multiple items is pretty standard UI behaviour and built-in to the jQueryUI Selectable. Did you also know you can left click and drag a focus over multiple items to select them?
However, I can see an advantage in offering the behaviour in question, so how about using left click or drag to select and then left click and drag to also de-select?
It may not be the most efficient way of doing it, but after playing around with the in-built callbacks, I've come up with something that seems to work. Based on the code in your question I've hooked into the in-built callback functions to store what was selected and also handle the selection removal. JavaScript duplicated below but

JQuery UI, Combining Sortable with Droppable

I am trying to combine JQuery UI sortable with droppable to create multiple pages for dropping and sorting things. I have setup a blog entry with a stand-along demo here:
http://whit.info/blog/2009/06/06/jquery-ui-combining-sortable-with-droppable/
and here is a jsFiddle:
http://jsfiddle.net/VUuyx/
Note that you can drag to sort the boxes, even into other columns. You can also click the page buttons to switch pages. My problem lies in combining these two features:
By using droppable, I've allowed the user to drag a box to a page button, the page will then switch, and the user can finish dragging it onto the newly revealed page. The problem is that when the page switches, the first column which appears under the dragged box doesn't have it's over event fire. You have to drag to another column, and then back to the first column to get the placeholder to appear.
I'm not sure, but I think I need to somehow clear the events, or fire them manually. The problem seems to stem from the fact that the dragged box is over the column when it is made visible.
Can you assist with this esoteric dilemma?
Thanks!
Update:
So I have been considering possible work arounds for this. Michal suggested firing the refresh method, which indeed doesn't solve the problem, but made me think about event issues.
It seems that when you mouse away and then back again, the proper events fire. Perhaps if I can manually fire the mouseout event for the first column, the reset will allow the mouseover event to fire properly.
I tried this:
$(".column:first").trigger('mouseout');
But I don't think that is the same as sortable's out event. Perhaps I should fire that event?
Maybe I'm misunderstanding the problem, but I don't think it has anything to do with the "page switching". If you turn on both pages at the same time and try to drag "Box 1" to a position above "Box 4", you'll see that it doesn't trigger that "Box 4"'s Sortable has received the Draggable until you go below "Box 4". This doesn't solve your problem, but perhaps will help you look in a better area for the solution.
See http://jsfiddle.net/nkBNP/7/ for a JSFiddle that demonstrates what I mean.
At least for the top down drop in I think the solution is somewhere in setting the box class to draggable and link it to the sortable object.
$(".box").draggable({
tolerance: 'point',
connectToSortable: '.column',
snap:false,
helper : 'clone',
});
This example creates a duplicate of the box but it does allow me to drag box 1 up to page 2 and slowly drag it down above box 5 and get placed into the top spot. It is very sensitive though. You may need to adjust the grids and snap to get it to work consistently for the casual user.
I can certainly imagine that a sortable object wouldn't expect something to come down from the top, because it expects things to be sorted from within the container. Droppable on the other hand expects things to enter from any direction.
Yeah adding $('.column').sortable("refresh");
to end of the show_page(id) function worked for me (only tested in firefox minefield):
function show_page(id) {
$('.page').removeClass('page_active');
$('#page_'+id).addClass('page_active');
$('.column').sortable("refresh");
}
Adding #edtechdev's answer to tolerance: 'intersect produced something I thought might satisfy you, Whit:
$(".column").sortable({
connectWith: '.column',
opacity: 0.4,
tolerance: 'intersect', //<--changed
placeholder: 'place_holder',
helper: function(event, el) {
var myclone = el.clone();
$('body').append(myclone);
return myclone;
},
}).disableSelection();
// ...
function show_page(id) {
$('.page').removeClass('page_active');
$('#page_'+id).addClass('page_active');
$('#page_'+id).find('.column:first').sortable('refresh'); //<- added
}
Check out drag and drop portal built using jQuery and Asp.Net MVC, it has all implementation in blog posts: http://lakkakula.wordpress.com/2009/06/15/web-2-0-portal-using-asp-net-mvc-microsoft-ajax-client-templates-and-jquery-with-drag-and-drop-widget-personalization/
Sortable has an undocumented option refreshPositions which automatically updates the position of your droppables when they are sortable as well. This prevents the placeholder from being droppable instead of the actual droppable.

Categories

Resources