I am making drag and drop event with html5.
If you drag an image, the transparent image sticks to mouse cursor though the base image keep still.
I would like to hide the base image as if you move some real object.
So I try this code.
<img src="img/tape01.png" id="img">
var img = document.getElementById('img');
img.addEventListener('dragstart', function(evt) {
//catch the drag event here.
img.style.visibility = 'hidden';
}, true);
But it hides not only base image but dragged image.
This is the standard behaviour of a html5 browser to keep two images of the draggable object on screen to remind the user the starting position and current position of the dragging object before its drop event is completed.
In your example, setting the draggable object 'img' be invisible will make the two images of it be invisible at the same time.
Related
I have a 100 (width) x 100 (Height) canvas arranged in a row and column of 5 x 6
it has a triangle drawn on them currently the canvas are arranged in such a way that every canvas overlaps each other. i want to add click on the triangle area
is there a way to bypass click to the underlying canvas when the click is in transparent area of the top canvas
With EaselJS, you can use the nextStage property to pass CreateJS mouse interactions to canvases that are below one another in the DOM.
// Overlapping Canvases
<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>
// Multiple Stages
stage1 = new createjs.Stage("canvas1"),
stage2 = new createjs.Stage("canvas2");
// Mouse events on content in each stage
stage1child.on("click", handleClick);
stage2child.on("click", handleClick);
// Stage 2 is higher in the DOM, so it will receive the mouse events first.
// Pass them on to the lower canvas/stage
stage2.nextStage = stage1;
Here is more info:
nextStage documentation
TwoStages demo in GitHub
TwoStages demo on createjs.com
I didn't entirely understood your question, but if you just want for the click to register to the Canvas bellow the shape, then you need to disable the mouse interaction for the shape on top, like this:
triangleShape.mouseEnabled = false;
By doing so, any mouse events will be ignored for this shape and passed instead to the objects bellow it.
Can I use two canvas elements in the same HTML file? I need to drag images from some area and drop them in another area in the same page.
The first region is a canvas where all images are put (I will use EaselJS library for this one). the second, and biggest part, is a grid. Tell me if you have other alternatives, I need ideas to implement this solution.
Yes, your project is possible.
Here's an outline:
Add all your images to EaselJS (as Bitmap objects);
Listen for mousedown events on the Bitmaps.
On mousedown:
Create an html img element (or have it available offscreen)
Place the img element directly over the EaselJS bitmap.
Make the img element draggable with jQueryUI
Make the second canvas a dropzone for the draggable img
Set the Bitmap visible property to false (so it’s no longer visible in EaselJS)
Trigger the mousedown event on the img element to trigger dragging the img
On drop: use drawImage to draw the dropped img on the second canvas.
Pseudo-code: secondCanvasContext.drawImage(imgElement,dropX,dropY)
I need to show a popup layer on a scene, creating a semi-transparent background layer that will also prevent touch events propagation. I am using the latest cocos2d-x v. 3.0-alpha-0.
What I want to achieve is a popup layer that fully handles touches (eg. buttons, menu items, scroll views, etc.), laying on a background layer (for design purposes), that covers the current scene. All items in the scene should not respond to touches any more.
Is this achievable using the new EventDispatcher class? I've been able to disable all touches to the main scene, but all instances of MenuItem that live in the scene are still touchable and active.
How can I achieve this? And, also, how can I create a touch listener that prevents all touches to the main scene but not to the popup?
You can disable menu items by setting setDisable property of menuitems to false.
Example
_menuItem->setEnabled(false);
For Layers use setTouchEnabled property
_backGroungLayer->setTouchEnabled(false);
Make sure that popup layer is not child of layer you want to disable.
To disable all items in menus do this
Suppose _menu contain various menuitems.
CCARRAY_FOREACH(_menu->getChildren(), item)
{
item.isEnabled=NO;
}
if you want to disable selected items just give them tags.There is no need to make any list.
I had the same problem and solved it with mm. It was dirty, but it worked:
Create a button using ccui.button.
Set the button size to your screen size.
Add this button as a background to your popup layer.
This will prevent any thing behind it being clicked.
By default, all CCMenu's have a set priority (kCCMenuHandlerPriority = -128) in cocos2d 2.1. So in a class (usually a CCNode descendant) that wants to swallow everything and preempt anything i do like in this dialog sequencer example below :
- (void)onEnter {
backdrop_.visible = self.isBackDropShown;
MPLOG(#"Adding self as a swallower touch delegate, above the rest of the planet.");
[[[CCDirector sharedDirector] touchDispatcher] addTargetedDelegate:self priority:_dialogTouchPriority swallowsTouches:YES];
for (CCMenu *mn in _menus) {
mn.touchPriotity = _dialogTouchPriority -1 ;
}
[super onEnter];
}
where _dialogTouchPriority is kCCMenuHandlerPriority-1 by default. It will be served before everything 'below'. It is a bad hack (cocos2d internals could be changed and break this), i know , but bullet proof. Use carefully, make certain you only ever have one of these in your scene.
I have a div with an anchor and icon.
<a id="createWave_addStation"><img class="createWaveToolBarImg"
src="img/mapIcons/ico_station.png"></a>
I drag this and want to drop it on an OpenLayers map. Because img's have draggable as default, I don't set it here. Now When I drag the icon, the img does not get dragged along so I only see the cursor. How can I show the icon od the dragged thing. This is my code, but it doesnt work.
$('#createWave_addStation').bind("dragstart", function(ev){
ev.preventDefault();
console.log("drag start");
enableGetMouseupEvent();
var dragIcon = document.createElement('img');
dragIcon.src = ICO_STATION;
dragIcon.width = 100;
ev.originalEvent.dataTransfer.setDragImg(dragIcon, -10, -10);
});
Well the code itself works, but the img is not shown while dragging
I hacked something together that works in Chrome, I didn't test it in any other browser.
A demo is in this fiddle.
Two things are important:
an arbitrary element should have set draggable="true"
the image you want to show while dragging should be preloaded, otherwise it will not show the first time.
I have this code for my effect to zoom in and zoom out in certains buttons
canada.addEventListener(MouseEvent.MOUSE_OVER, canadaover);
function canadaover(event:MouseEvent):void
{
gotoAndPlay("canadaS");
trace("in");
}
canada.addEventListener(MouseEvent.MOUSE_OUT, canadaout);
function canadaout(event:MouseEvent):void
{
gotoAndPlay("canadaF");
trace("out");
}
canada.addEventListener(MouseEvent.CLICK, clickcanada);
function clickcanada(event:MouseEvent):void
{
trace("Mouse clicked");
}
the problem is when u reach certain corner of the button it kinda gets into a loop, any ideas how can i fix this?
here its the link of the swf i'm trying to do:
http://viajescupatitzio.com/america%20map.swf
If your buttons are MovieClips you can add inside a layer with a mask (for example rectangle) on top. Mask width and height should be your mouseover region and give it alpha = 0. It will be invisible, but it will work with MOUSE_OVER and MOUSE_OUT Events.
You should move your buttons into a different hierarchy level than the graphics you are changing - even if the buttons disappear, or are covered with graphics for just a very short moment, both mouseOver and mouseOut events will be fired (the mouse has left and reentered the button) - and that probably causes your "loop".
It is generally a good idea to have animations and graphical objects within nested MovieClips, and place control elements on a higher level of the display list - that way you can make sure the elements don't overlap and/or interfere.