CODEWITHSUNDEEP
javascripthtmlcanvasdrag-and-dropkineticjs
Timo Willemsen
Timo Willemsen

Reputation: 8857

Dragging out of canvas causes selection of page

Currently I'm creating an web application with KineticJS, which includes dragging and dropping on a canvas. It works perfectly fine, when you keep your mouse inside your canvas.

However, if you leave the canvas, with your left mouse button pressed, you will select everything on the page. Is possible to intercept that event in some way. Obviously onselect is something else :p

Upvotes: 0

Views: 238

Answers (1)

Vengarioth
Vengarioth

Reputation: 684

I encapsulated the canvas element into a div and then assigned the event handlers onto the div, the div covers 100% of the page's layout like:

<div class="fillPage">
    <canvas id="Viewport"></canvas>
</div>

I also added event handlers for blur (page-leave) and the following css:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Upvotes: 1

Related Questions