0

I'm working on a project that has some draggable content in it. All of the images that are draggable have portion that are transparent and overlap other content.

I set up an example on JSFiddle: Draggable Example

<body>
    <p>The background is transparent, but if you grab ANYWHERE in the border you can drag the 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 the example you can grab the image by holding down the left mouse button anywhere within the borders of the image, even if they are transparent. In this example my goal would be to only be able to drag the image if you grabbed a visible portion of the planet Jupiter.

Is this possible in html?

gvlasov
  • 18,638
  • 21
  • 74
  • 110
irpepper
  • 1
  • The image in your example isn't draggable. It would help if you added your jQuery source code to the example to make the image draggable. I believe using css would allow you to shape the element but depending on the images you want to use, this could prove tricky. – NewToJS Apr 12 '15 at 06:27
  • Are the images all circular like that? And maybe more importantly, what is the end purpose of the dragging? – simpleManderson Apr 12 '15 at 06:29
  • Do you mean dragging as in the thing the browser/OS provides to move it between apps or to the desktop? – bjb568 Apr 12 '15 at 06:32
  • The images are slices of a circle that come together to form a solid circle. Each slice is individually draggable and performs a function when dropped somewhere. As you can imagine since the images are close together the transparent portion overlaps and you can accidentally grab the wrong slice. – irpepper Apr 12 '15 at 06:32
  • If all the images are circle, you can use css `border-radius` and that should work. – NewToJS Apr 12 '15 at 06:35
  • https://jsfiddle.net/IRPepper/c53yzzhx/ – irpepper Apr 12 '15 at 06:37
  • That is a semi mockup of what I am doing. The draggable isn't appending correctly, but the idea is that you grab one of those slices and drop it somewhere else. If you grab near any of those leafs, you will grab the leaf when you should just be hitting blank space. – irpepper Apr 12 '15 at 06:39
  • The border-radius idea sounded perfect, unfortunately it doesn't change the ability to grab the image where the border was warped. – irpepper Apr 12 '15 at 06:56
  • Correct, I have just created a little demo to see if border-radius would work. Unfortunately it doesn't. Lucky I only posted as a comment/idea. – NewToJS Apr 12 '15 at 07:06
  • It was such an elegant solution too =( – irpepper Apr 12 '15 at 07:07
  • Oh, I see what's going on. When you click, you're only ever clicking on the top rendered layer (#category8). You can even remove the `draggable` bits from all the other layers and still get the result you're getting now: https://jsfiddle.net/c53yzzhx/1/ Canvas may be your only hope! – simpleManderson Apr 12 '15 at 07:14
  • you can have 2 images one to drag the other on top. but my demo needs some work so i give it you to finish-- https://jsfiddle.net/txhL13ws/ – Tasos Apr 12 '15 at 07:44

1 Answers1

0

Based on your clarification in comments above, it might be easiest to draw the images in a canvas element. You can add draggability to the canvas as explained in this SO post: Make image drawn on canvas draggable with JavaScript. And you can modify that to trigger the drag flag only if a non-transparent pixel is at the clicked position.

Community
  • 1
  • 1
simpleManderson
  • 436
  • 3
  • 8
  • I'm definitely going to check into this, I have never used the canvas tag before so I don't know if this will be the "easiest" for me. Thanks for your suggestion, I'm going to start reading up on the canvas now. – irpepper Apr 12 '15 at 06:58