javascript - How do you make a portion of the image undraggable? -



javascript - How do you make a portion of the image undraggable? -

i'm working on project has draggable content in it. of images draggable have portion transparent , overlap other content.

i set illustration on jsfiddle: draggable example

<body> <p>the background transparent, if grab anywhere in border can drag image around.</p> <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/jupiter_(transparent).png/484px-jupiter_(transparent).png"></img> </body> img{ border: solid black 1px; }

in illustration can grab image holding downwards left mouse button anywhere within borders of image, if transparent. in illustration goal able drag image if grabbed visible portion of planet jupiter.

is possible in html?

based on clarification in comments above, might easiest draw images in canvas element. can add together draggability canvas explained in post: make image drawn on html5 canvas draggable javascript. , can modify trigger drag flag if non-transparent pixel @ clicked position.

javascript jquery html css jquery-ui

Comments

Popular posts from this blog

java - How to set log4j.defaultInitOverride property to false in jboss server 6 -

c - GStreamer 1.0 1.4.5 RTSP Example Server sends 503 Service unavailable -

Using ajax with sonata admin list view pagination -