I am using html5 drag and drop.
When I drag an image or link from any given webpage, the browser-window is recognizing the dragover event.
For example dragging an image over a browser tab, makes the browser switching the window. Same works for example with dragging links to bookmarks.
Now when I drag my custom draggable element, there is no reaction from the browser. Is there a way to change this behavior?
I don't understand what you want to achieve, but it seems that you want to make something happens when you move your custom element outside the document or the window.
You should try binding a handler with a dragleave or something like that. Here is an example from another question:
var dropTarget = $('.dropTarget'),
html = $('html'),
showDrag = false,
timeout = -1;
html.bind('dragenter', function () {
dropTarget.addClass('dragging');
showDrag = true;
});
html.bind('dragover', function(){
showDrag = true;
});
html.bind('dragleave', function (e) {
showDrag = false;
clearTimeout( timeout );
timeout = setTimeout( function(){
if( !showDrag ){ dropTarget.removeClass('dragging'); }
}, 200 );
});
I think that could work for you, but for further help you should extend your issue's description.
Also I ll leave some HTML5 drag and drop docs here
Related
Whenever I hover a markup and right click it, it locks the mouse movement to the drawing and makes it impossible to move the mouse without moving the drawing.
Is it possible to disable this behaviour?
Depending on your specific scenario, there's a few things you can try:
If you're trying to enable camera pan while in the markup mode on a 2D drawing, you can simply "enable navigation" for the markup tool:
viewer.toolController.getTool('markups.core').allowNavigation(true);
If that's not sufficient for your case, you could also try and modify the handleButtonDown method that the markup tool uses to decide whether and how it should handle the mouse button down event. Currently the method looks like this:
this.handleButtonDown = function(event, button) {
if (this.allowNav || (this.is2d && (avp.isRightClick(event, this.viewer.navigation) || avp.isMiddleClick(event)))) {
// If pan tool won't handle button down, then pass over the event
if (this.panTool && this.panTool.handleButtonDown) {
return this.panTool.handleButtonDown(event, button);
} else return false;
}
return true; // Consume event
};
Where avp is just a shortcut to the Autodesk.Viewing.Private namespace.
viewer.toolController.getTool('markups.core').handleButtonDown = function (event, button) {
// Return true when you want the measure tool to "capture" the event and process it somehow,
// or false when you want to ignore the event and allow other tools on the stack to handle it
};
I want to know that fitToView() finished completely.
Some program procedures do not work after fitToView() without setTimeout().
For example, the following code not work.
const dbid = [1141]
this.viewer.select(dbid)
this.viewer.fitToView(dbid, viewer.model)
zoom() //This will not work
//code from:
function zoom (){
var nav = viewer.navigation
var pos = nav.getPosition()
var target = nav.getTarget()
var viewdir = new THREE.Vector3()
viewdir.subVectors (pos, target).normalize()
// zooms out by 100 along the view direction
viewdir.multiplyScalar (1000)
pos.add(viewdir)
nav.setPosition(pos)
}
The following code work well.
this.viewer.fitToView(dbid, viewer.model)
setTimeout(function(){
zoom() //This will work fine
}, 2000)
However, I don't want to use the setTimeout as much as possible.
Is there a way to know that fitToView () is finished completely?
If you use version 3.2.1 of the viewer a new event Autodesk.Viewing.CAMERA_TRANSITION_COMPLETED, it will be fired while following transitions are finished:
Go Home transition
Focus / Fit to View transition
Restore State transition
Named Views transition
Any other camera transitions
// Hook the event
viewer.addEventListener(Autodesk.Viewing.CAMERA_TRANSITION_COMPLETED, function(){
console.log('camera is no longer moving');
});
// Trigger an action that will move the camera and fire the event
viewer.fitToView();
You can see more about the Viewer Version changes here.
https://developer.autodesk.com/en/docs/viewer/v2/overview/changelog/3.2.1/
I placed the html5 canvas in the background using the following
style="position:fixed;top:0;left:0;z-index:-1;"
On my window.onload(), I am adding a mouse event listener to the canvas as follows
canvas.addEventListener('mousemove', onMouseMove, false)
but unfortunately my canvas is not receiving any mouse events. How do you propagate events down the z-axis? Is it possible to do it without using any external library(if exist)?
I tried searching for it but couldn't found anything relevant so far.
You want to "bubble" a mousemove event from a none-fixed element to a fixed element with different parents? I think you have to check and trigger for your own:
Build a wrapper for the none fixed element(s). This gets also a mousemove event listener. If the mousemove is over the fixed element (check clientX and clientY), trigger the mousemove event on the fixed element.
E.g. tested with firefox:
function onCanvasMouseMove(oEvent) {
console.log(oEvent);
}
// wrapper mousemove handler:
// if the mouse is over the canvas, trigger mousemove event on it.
function onWrapperMouseMove(oEvent) {
if (
oEvent.clientX <= oCanvas.offsetWidth
&& oEvent.clientY <= oCanvas.offsetHeight
) {
oEvent.stopPropagation();
var oNewEvent = document.createEvent("MouseEvents");
oNewEvent.initMouseEvent("mousemove", true, true, window, 0, oEvent.screenX, oEvent.screenY, oEvent.clientX, oEvent.clientY, false, false, false, false, 0, null);
oCanvas.dispatchEvent(oNewEvent);
}
}
var oCanvas;
window.onload = function() {
oCanvas = document.getElementById('canvas');
oCanvas.addEventListener('mousemove', onCanvasMouseMove, false);
// add mousemove listener to none-fixed wrapper
var oWrapper = document.getElementById('wrapper');
oWrapper.addEventListener('mousemove', onWrapperMouseMove, false);
};
Also see this example.
P.s.: bubbling is not the right word, it normaly means bubbling the event to the parent elements.
You could try setting the overlaid elements to pointer-events: none but this will only work in Firefox, Chrome and Safari. It might also cause you some issues if there are some elements and mouse events you do want to handle before they hit the canvas.
Essentially, I have flash content that scrolls on mouse wheel. It works fine, unless there is other content in the browser such that the browser's scrollbar is enabled - when that is the case, both the browser window AND my SWF scroll on mouse wheel. Is there any way to correct this behavior?
Similar question asked here:
disable mouse wheel scrolling while cursor over flex app?
which references the solution blogged about here:
http://www.spikything.com/blog/index.php/2009/11/27/stop-simultaneous-flash-browser-scrolling/
But the solution does not work on all browsers! While it works on some Windows browsers, it doesn't work at all on Mac OS X - it registers mouse wheel events in Firefox, but they are not getting fired at all in Chrome and Safari.
Now I know that (per the official Adobe InteractiveObject docs) mouse wheel is supposedly only supported on Windows systems, but the event is still fired by default on Mac OS X. Is this simultaneous scroll bug the reason it is not supported?
Edit: adding more info on above solution...
Note that the above solution basically uses ExternalInterface to send the following JavaScript to the "eval" function:
var browserScrolling;
function allowBrowserScroll(value) {
browserScrolling = value;
}
function handle(delta) {
if (!browserScrolling) {
return false;
}
return true;
}
function wheel(event) {
var delta = 0;
if (!event) {
event = window.event;
}
if (event.wheelDelta) {
delta = event.wheelDelta / 120;
} else if (event.detail) {
delta = -event.detail / 3;
}
if (delta) {
handle(delta);
}
if (!browserScrolling) {
if (event.preventDefault) {
event.preventDefault();
}
event.returnValue = false;
}
}
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = wheel;
allowBrowserScroll(true);
Is this cat at least on the right path, or is there a better (i.e. fully functional) solution?
I created a small lib that handles everything for you. It works perfect (as far as I tested) on default flash player plugin, on Pepper flash and on MAC-OS. And you don't need to add any .js files to your HTML folder
GIhub repo
You should be able to do this entirely via javascript ...
First off you need to listen to "wheel", "mousewheel" and also to "DOMMouseScroll". It appears DOMMouseScroll is for Firefox only .....
Secondly -- it might be a little bit better to do this entirely in javascript:
// pseudo-code -- this tests for all "Objects" using not-so-standard elementFromPoint;
// You can also look for the element directly using id
var fn = function(e) {
var element = document.elementFromPoint(e.pageX, e.pageY);
if (element && element.tagName === 'OBJECT') {
e.preventDefault();
e.stopPropagation();
}
}
window.addEventListener('DOMMouseScroll', fn);
window.addEventListener('mousewheel', fn);
You may need to test the variations of scroll and mousewheel to access the Webkit events. See here.
I believe you will have to hook the event in JS on the page, then prevent default, and send the event(delta) to your flash. The code you posted looks like it is setting that up somewhat (preventing default) yet I do not see where the code is hooking the DOM.
I'm making a web site and suddenly I ran into a problem. It's not huge, but I would like to fix it. On my site I have many images but there is a glitch. The images are "dragable". I mean when you click on a image and than move your mouse the images are being dragged. How can that be fixed?
http://nitidus-consto.kilu.org/
It is always like this.
Don't find anything weird in it.
Anyway this link can help you:
http://www.redips.net/firefox/disable-image-dragging/
you can use javascript to avoid the image dragging:
html file:
<!-- right image (dragging disabled) -->
<img src="image.png" onmousedown="if (event.preventDefault) event.preventDefault()">
javascript:
// register onLoad event with anonymous function
window.onload = function (e) {
var evt = e || window.event,// define event (cross browser)
imgs, // images collection
i; // used in local loop
// if preventDefault exists, then define onmousedown event handlers
if (evt.preventDefault) {
// collect all images on the page
imgs = document.getElementsByTagName('img');
// loop through fetched images
for (i = 0; i < imgs.length; i++) {
// and define onmousedown event handler
imgs[i].onmousedown = disableDragging;
}
}
};
// disable image dragging
function disableDragging(e) {
e.preventDefault();
}