I have coded a jquery script where there is a small grid on screen and using drag and drop users can place tiles on the grid (snaps in place). Currently if you hover over a tile it fades in the option to rotate, but I would much prefer it if you could right click to rotate (making it more natural). I understand blocking right click completely is often frowned upon so was wondering if it was possible just within a particular element, then capturing that event, doing something in JS and disabling the context menu? - that works in every browser.
On a side note, currently I am using jQuery for effects and custom javascript for drag and drop, is it worth looking at a jQuery plugin for drag and drop?
Many thanks,
For capturing the right click, you can use this jquery:
$('#gridID').bind('contextmenu', function(e) {
// do stuff here instead of normal context menu
return false;
});
This works in chrome, firefox, and safari. Haven't tested IE. Works in IE too. Only caveat is it doesn't work in Opera apparently. So if you can live with that...
I'm not a fan of using the right mouse button on web pages. However, if you really want to do it, you could trap the right mouse button as described here. You could block the right mouse button (in other words return false in your event handler) conditionally if the mouse is over your grid cells.
Regarding your bonus question: jquery ui has drag & drop functionality. It's probably easier to use that than rolling your own.
"is it worth looking at a jQuery plugin for drag and drop?"
Only if you don't intend your application to be used on the iPhone O.S with safari, i.e. including iPad, see Safari Web Content Guide: Handling Events
Related
Since I´m working on a project where I need to be able to drag objects around my canvas but also to scroll the entire page by dragging the actual canvas 'background' behind my PIXI Sprites, i followed the findings of this guy here:
https://github.com/pixijs/pixi.js/issues/2483 :
By default, the Pixi canvas/display-area cannot be used to scroll the
webpage that contains it. Which is important on touch screens. (eg. If
you use the rest of the web-page to pinch-zoom into the Pixi canvas,
you can become trapped and unable to zoom back out (or pan away),
because there's no non-Pixi-canvas area of the page to "grab" with
your pinch gesture).
To enable this functionality, I use autoPreventDefault. But this comes
with some undesirable side-effects, like scroll/pinch-zoom actions
over the canvas registering "taps" or clicks in a way that doesn't
make sense. (ie. I'm attempting to zoom or scroll the outer page at
that point, not interact with the Pixi canvas)
To work around that, I modify and compile my own custom version of
Pixi where I can apply preventDefault in a more granular way...
To get page-scrolling functionality it seems I only need to
preventDefault in the InteractionManager.prototype.onTouchEnd
function. Whereas autoPreventDefault will also preventDefault on 3
other events. (onMouseDown, onTouchMove, onTouchStart).
Leaving autoPreventDefault = false and applying preventDefault only to
onTouchEnd, gives me the functionality I need. But it'd be nice to not
have to customize and rebuild Pixi in this way every release. (Sorry
if there's something else I'm missing here; I don't completely
understand the event system in Pixi, or what else to do about this
scroll-touch problem)
So i disabled e.preventDefault() on 'onTouchStart' and on 'onMouseMove' but left it as is on 'onTouchEnd'
This works perfect on IOS devices but not on Android, the only exception being a Samsung A7 using Adblock browser (fails on Chrome).
Would really appreciate some help on this.
TLDR:
Disabling PIXI´s e.preventDefault on onTouchStart and onMouseMove works on IOS devices and lets me scroll the page by draggin my canvas around but not on Android devices.
My solution for that was to use
renderer.plugins.interaction.autoPreventDefault = false
This should work on iOS and Android.
Docs for autoPreventDefault reads:
Should the manager automatically prevent default browser actions.
Using PIXI 4.5.6.
Take a look at the docs:
http://pixijs.download/dev/docs/PIXI.CanvasRenderer.html#plugins
http://pixijs.download/dev/docs/PIXI.interaction.InteractionManager.html
Using renderer.plugins.interaction.autoPreventDefault=true should do the trick.
I'm using iScroll 4 for my rather heavy iPhone web/Phonegap app and trying to find a way to switch between iScrolls scrolling functionality and standard "native" webview scrolling, basically on click. Why I want this is described below.
My app has several different subpages all in one file. Some subpages have input fields, some don't. As we all know, iScroll + input fields = you're out of luck.
I've wrapped iScrolls wrapper div (and all its functionality) around the one sub page where scrolling is crucial, and where there are no input fields. The other sections, I've simply placed outside this div, which gives these no scrolling functionality at all. I've of course tried wrapping all inside the wrapper and enabling/disabling iScroll (shown below) but that didn't work me at all:
myScroll.disable()
myScroll.enable()
By placing some sub pages outside the main scrolling area / iScroll div, I've disabled both iScrolls and the standard webview scrolling (the latter - which i guess iScroll does) which leaves me with no scrolling at all.
I was, however, able to get some vertical movability (is that even a word?) by adding the lines below. Unfortunately, that leaves me with only basic scrolling functionality, hence no more scrolling than your finger manages to swipe vertically on the screen. Terrible way to browse through large quantities of content
document.removeEventListener('touchmove', preventDefault, false);
document.removeEventListener('touchmove', preventDefault, true);
Therefore, I'm searching for a way to enable standard webview scrolling on the sub pages placed outside of iScroll's wrapper div. I've tried different approaches such as the ones mentioned above but with no success. Sorry for not providing you guys with any hard code or demos to test out for yourselves, it's simply too much code and it would be presented so out of its context it wouldn't be of any use to anybody.
So, is there a way n javascript to do this, switching between iScroll scrolling functionality and standard "native" webview scrolling? I would rather not rebuild the entire DOM so a solution like the one described above would be preferable.
I never got this to work so I assume it cannot (easily) be done. I ended up including four different iscroll wrappers into my app which works but not what I was looking for. I'll make this as the right answer for the time being.
I am using a div as a popup which is draggable as follows
$("#popup").draggable();
The problem is if we mouseclick on this div and leave the click, then the div sticks to the mouse in some IE versions, especially on Windows 7. The div moves with the mouse even if its not click & drag action (its just a mouseover action). Please let me know if this is jQuery bug or some OS/browser bug with proper solution?
I am using jquery-ui-1.8.6 js with jquery-1.4.2 js.
i will recommend you to use the latest versions of both jquery-ui and jquery library file..
the code you provide has not much enough to be debate about but as you mentioned, it could be because of the older version of files.
i am using latest versions of both files (jquery-ui-1.8.21/jquery-1.7.1) and dragging is working fine in all ie versions.
but when you are using iframes, things went little different. because some browsers specially ie handles iframes differently, i might be guessing but it could be the case! :)
how to use javascript to drag&drop the div for touch screen(not iphone or ipad.It owns traditional browser like IE6 but operate by fingers)？
on that device,fingers==mouse?
I used onmousedown/onmousemove for traditional page,but will it still work on that touch screen?
the code can still well work?if not,how to use it?
There are no special js events for drag and drop.
You existing code for drag and drop using the mouse might work (probably with some quirks).
It all depends on how good your touchscreen monitor translates human touches to mouse events.
I am using the following code to make the browser follow a link on mouse down instead of on mouse up (like a normal click).
$('#links a').each(function(){
$(this).mousedown(function(){
window.location.href=$(this).attr('href');
});
});
First of all, is this good practice? GMail does this and it gives the effect that the page is loading faster than it actually is.
Also, is there a better way of doing this? I haven't tested this in all browsers yet, so I'm not sure if it works in older browsers.
The mousedown function is not supported by Internet Explorer version 5.5 or earlier. jQuery normalizes the browser-specific behavior of the event capture into the mousedown function.
As to good practice or not, I don't see a tangible performance benefit from handling mouse click events in this way. So, unless you have a specific reason for doing so, I would stay with standard conventions.
The only thing that should happen on mouse down is any necessary effects to show the user the mouse button is indeed down.
The reason you don't execute anything until mouse up goes back to at least the Apple Human Interface Guidelines for the original Macintosh: This gives the user the option of "canceling" their click by moving the mouse off the button before letting go.
Doing things on mouse down will give the user the sense that your program is pulling the rug, er, dialog box out from under them.