123
user profile image

There is one element that allows you to drag around a part of it. That element is a textarea. This places a note on the resizable corner of a textarea. When you’re moving the note, you’re actually just resizing the textarea and the note happens to follow along.

Comments

  1. Very interesting use of contenteditable.

    Do we know if there's some methods to it? Ways to have a callback and send those informations to a server?

    ---- Actually, there is!

    https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event

    Could be very useful

  2. Can you make a youtube tutorial for this one ?

  3. Haha that's really clever XD well done @scottkellum

  4. @raul-rogojan I hadn’t thought about it but yeah maybe! You really shouldn’t use this technique for anything other than a party trick.

  5. Cool Trick!

  6. Wow, took me a bunch of time to understand how it works ! Really clever one :)

  7. still would remember location in browser

  8. Could you explain how it works in the description please? Thanks.

    -- Edit: Thanks a lot! I wasn't able to get it on a phone. Really funny experiment :)

  9. IT IS NOT REPLACING. CAN YOU PLEASE MAKE IT REPLACIBLE

  10. @rishiamalhotra I’m unsure what you mean or want.

  11. @ThiemelJiri Sure thing! Hope that helped.

  12. Funny trick. I spent some time understanding that you resize the textarea. I was looking for the "drag"-property, or something similar, but then it hit me.

  13. Neat trick! Too bad it doesn't work on mobile devices and its accessibility is... questionable, to say the least 😅 In the meanwhile, I'm digging the style that you applied to the note.

  14. fantastic!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...