We Keep Coding

KineticJS: make dropped elements be draggable as a Kinetic.Group

Well.. so it's the same problem that I face with Kinetic.Group. I tried several things to make this work, but always the same result: it does not work, and even worse, the basic drag and drop functionality disappears!
I already know how to do this inside one container, the difficulty comes when I try to adapt it to the drag and drop from DOM to container. After the drop, I need the images and shapes to be moved all together. That's why I created a group for each item and made it draggable.
This is the fiddle I'm changing to make the dropped elements in the canvas, be draggable as a whole group (the non-working fiddle) http://jsfiddle.net/gkefk/15/. What is wrong with this code?
PS1: this one is the main functionality of drag and drop http://jsfiddle.net/gkefk/14/ which I'm editing.
PS2: I'm a beginner, so if you find "stupidities" in that code, please report.

A simple guide how to get what you want out of this:
Get rid of jQuery and start over.
1. Create a new Stage
2. Create two layers, one taking up the left half of the Stage, the other the right half.
3. put all your objects on the left side, make them clone-able on mousedown and fire the drag event so you can place them in the other layer on mouse up.
4. if your item is a rectangle - I'm assuming this is a group which is will have children, create a new group, and a rectangle inside it, place it in the right layer on drop.
5. if your item is a house, check for mouse intersection with a rectangle, if mouse is over a rectangle, get the parent of the rectangle on drop (which will be a group), and then place the house in that group, else place in right layer freely.

collision detection + mouse events in kineticjs

I am trying to do a drag & drop on a number of rectangle objects that are draggable.
There is another set of rectangle objects acting as container for dropping objects - I have added them to a group.
How can I detect the collision between a group/or any of the box objects(stored in array) - with the draggable elements.
Everything is in a single layer.
Also when the draggable element is placed over the group box, it does not listen to the mouse over event (which is assigned to it) - is there a way to delegate the events(mouseover, mouseout) to the low level object when another element drags over it.
box.on("mouseover",
function(e) {
console.log("mouseover");});
Thanks.

I believe that KineticJS doesn't support it's own collision detection so you would have to write your own function. These 2 SO questions are good starting points:
Dragging collisions
HTML5 / kineticJS getIntersection function implementation
Referencing the answer to this question: How to start mouseover event while dragging
We see that we can follow similarly on KineticJS, and that the solution goes hand in hand with creating your own collision detection function. The only difference here is instead of calculating the coordinates for hit detection on divs, you can calculate the 4 corner point coordinates of each shape (in your case, a rectangle). Also, instead of writing your own drag functions, you can use getMousePos() and the events: dragstart, dragend, and mousemove to rewrite the code from the fiddle example and cater to your kinetic rectangles.

How to detect if a shape was clicked (HTML5 canvas)?

I am drawing different shapes like rectangle, triangle, hexagon etc. using the canvas and lineTo method like in this blog. I just want a simple way to find if I clicked inside a shape. I can do it by filling the shape with some color and the checking if the point I clicked has this color but I don't want to use fill color method. Is there any other way to do it?
Also found isPointInPath but it did not work.

Check in here:
Javascript check Mouse clicked inside the Circle or Polygon
meouw answer works for sure I've test it and guarantee it works.
It seems that there are some other solutions, too that have been upvoted,
maybe you can try them, either

You could either try some canvas frameworks like http://kineticjs.com/ (check events section) which support already clickable elements out of the box or you'll need to write two functions, one which gives you your relative mouse click coordinates inside the canvas element (I used the one described here: https://stackoverflow.com/a/5932203/532102) and after write another function which checks if the returned mouse coordinates intersect with your shape on the canvas.

Distinguish between leaving shape and entering overlapping shape (KineticJS)

I imagine this would be a pretty common issue I am having. I have one small shape on top of a larger shape. When I enter the large shape, it gets registered as a mouseenter/mouseover. But when I enter the small shape, the large shape registers a mouseleave/mouseout. This would be like if I went to the bathroom at LAX and airport personnel demanding that I go through security again for having left the terminal.
Here is a minimal JSFiddle example illustrating the problem.

This is intended. You are no longer hovering over the circle, you are hovering over the triangle. These are layers, so by your definition you're touching floorboards when standing on the carpet.
If you want the triangle to ignore events, you can call triangle.setListening(false), as shown here: http://jsfiddle.net/YcBNL/19/. This way, events will pass through it to the shape below.
Another approach is to group the circle and triangle using a Kinetic.Group, and add the event listener to the group instead of the circle.

Michael's suggestion above seemed promising, but all it does is either handicap one shape (in this case the triangle), or moves all the functionality up into the group, which is not what I want either.
Temporarily what I have done is use the mouseenter signal for the triangle and mouseleave signal for the circle, which seems to work. However, I doubt this will work for more than two overlapping shapes. If someone comes up with a better solution, I'm all ears =)

using Raphael JS to scale a group of elements at once

I have a simple scene in Raphael JS which contains mainly basic elements, circles, rect, images, etc.
I want to scale up a circle on the mouseover event, which I can do, but I want to add an image over the top of the circle and have that scale as well when the mouse is over the circle OR the image.
Is there a way that I can scale two (or X) items instead of one at a time? Is there some kind of "container" element that I cant find?
Also, when then mouse is over the circle, the event fires, but then when the mouse goes over the image, the mouseout event of the circle fires, how can I stop this so that it looks like the circle and image are one element?

I think what you have to do here is create a transparent circle over the circle/image combination you already have. So, circle,image,circle. The second circle is where you put your event handling. By doing it this way, the top transparent circle will get focus even when it looks like you're hovering over the image.
Stick the lot of them in a set and scale the set in the mouseover. I'd do an example for you, but I'm inherently lazy. If you're really stuck, I'll give it a go.
Hope that makes sense.