Develop Reference

Clicks only work on the center of elements, what's happening?

I'm using React-Beatiful-DnD, as shown in the attached GIF, clicks only work on the center of the elements. I want clicks to also work on the edges of elements...
In this case, what keywords should I search for to solve the problem?
My code is as follows (simplified)
<div {...dragableHandleProps}>
<Button />
</div>
The Button component is from https://blueprintjs.com/docs/#core/components/button
But anyway, the click event is captured by the div tag

Removing an Image from Canvas on Double Click

I'm Dragging and Drooping an image from a toolbar onto a canvas and then moving it around in the canvas.Currently I'm able to load a single image onto a canvas multiple times from the toolbar as shown in the link below.
http://jsfiddle.net/gkefk/22/
I want to add the functionality of deleting a particular copy of the image from the canvas when the user double clicks on that particular image.For this I'm triggering a jQuery event on double click.
$("#image").dblclick(function(){
layer.remove();
});
Even though I'm double clicking on a particular copy the image,that particular copy is not getting deleted from the canvas.I can't understand what I'm doing wrong..Please Help
The link to the fiddle containing the jQuery event
http://jsfiddle.net/gkefk/23/

Updated your fiddle to make it work:
image.on('dblclick', function() {
image.remove();
layer.draw();
});
http://jsfiddle.net/gkefk/26/
You have to add an event handler to each copy of the image instead of trusting in jQuery to dynamically do this.
Your jQuery call is done once on document load (while no element with id "image" exists) and has no effect afterwards. Also keep in mind that it's not a good idea to work with a static ID on multiple dynamic elements as an ID has to be unique.

Possible to trigger a Bootstrap Tooltip from a separate elment?

I am working on a system where a user can add notes over an image that they submit. Currently I have a note div that when clicked, will open up a text box to edit it. When hovering over this div, I use Bootstrap Tooltip to preview the information within the textbox.
I also have a list of the notes within a separate right panel. Is is possible to hover over the listed note in the right panel, and show the tooltip on the note div? In general, my question is: Is it possible to activate a tooltip from a separate div?
Here is the primary div that when hovered, shows a tooltip
<div originalh="85" originalw="122" originaly="501" originalx="490" h="23.071428571428" w="33.114285714286" y="135.98571428571" x="133" noteid="1153" note="TEST" class="noteBox helpTip" onclick="process.editNote(this)" id="note1153" data-original-title="TEST<br></div><small>Type: Color Correction</small><br/><small>Status: Awaiting Approval</small><br /><small>By: Josh Admin<br />Today 10:54 AM</small>"></div>
Is is possible for me to apply some code to a separate div that would allow me to hover over it, and trigger the tooltip on #note1153 above?

Yes, you can trigger the tooltip on any element via JavaScript. See the tooltip documentation for more information.
You would just do:
$('#whatever').tooltip('show');
Here's an example of it in action: http://jsfiddle.net/sJ88m/

Disable div click events

I have <div> with width and height properties. I want to put <div> over it, so the click events of the first <div> will not be registered anymore.
For example, I have div and when I click on it something is happening, but when I put second <div> over the first, clicking on the first <div> area will now fire that click events anymore.
<div id="firstDiv" style="width:100px; height:100px">bla bla</div>
How to put another <div> over "firstDiv" so I will not be able to change its elements? Is it possible?

just to disable click event to a div don't place extra div over it just use on() and off() from jQuery
Details : ON ,OFF
Still if you want to place a div over another try using css positioning and z-index

A nice way I've seen it done, and done it myself is to use a modal 'mask' overlay.
The grayed out transparent mask that covers the entire page, except for the element you're interacting with, eg. modal popup window.
You could do a mini version of it just within the popup and push the three non active divs behind it with CSS z-index.
One more way is to use the jQuery BlockUI plugin.

I personally like using something like this
pointer-events:none;
Disable's click events

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.