I am trying to create drag handles to any double clicked element. I was able to add drag handles to all four corners of a clicked DIV element but not the IMG element on my page. I first suspected that the handles failed to be added to the IMG element because the IMG element is an inline element but the handles are block elements. Thus I tried making the IMG element an inline-block element but that didn’t work. I then tried making the IMG element a block element and that too failed to add drag handles to the IMG element. Please see my code here.
you cant appendChild to something that isnt a container. (Well, you can, but it doesnt render anything, because an img isnt a logical container)
The handles appear with the <img> element in Firefox.
Which is not up to HTML standards. IMG is a “Nothing” content type, which is defined to be “must contain no Text nodes…and no element nodes.”
1 Like
I think that’s because the image source is missing and then it is no longer a replaced element.
You can use :before and :after on images that have no image source but not when the source is present. Maybe it’s a similar behaviour and Firefox has gone down that route.
Hi Paul, I have tried it with image source but it didn’t work.
Sorry I must have confused you
It won’t work with an image source because that will be classes as a replaced element and behaves as @m_hutley explained above.
I was just surmising that it probably works In Firefox when there is no image source because it no lnger has replaced content.
Suffice to say you can’t do it that way whatever and will have to shim an element around the image and use that for your handles.
or replace the image with a div that just happens to have a background image through CSS.
2 Likes
That seems to be the only option
Consider having the handles as siblings instead of children of the image as here:
The relative positions of handles have been calculated using image dimensions, image margins and hande dimensions (including border width).
2 Likes
Can you please give the ability to add the handles dynamically by double clicking the image. Also please add a middle handle on each side of the image which will give a total of 8 handles. In my current code which adds the handles as children of the clicked DIV, when I drag the topright handle, the topmiddle handle stays exactly in the middle between the topleft and topright handles due to the CSS animation. I don’t know how I would do that using CSS if I were to dynamically add the handles as siblings of the image. Can you show that please.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.