2

I'm using jQueryUI to create a large table of sortable cards, each of which is composed of a large tree of nested div tags with styling using CSS. When I drag a card under certain conditions, I want to create a slightly transparent "clone" of the card that hovers just to the right of the "real" card while dragging, but I don't want to actually duplicate all of the HTML in order to accomplish this visual effect.

So, is it possible to use javascript to draw the same DOM element on a webpage in two different places without actually duplicating the HTML?

Thanks to anyone who answers.

ihake
  • 1,741
  • 1
  • 17
  • 29
  • 2
    It's not possible for the exact same element to be in 2 places at once. It's possible to clone that element though. There is also a possibility of creating shadow dom with pseudo selectors such as `after:` and `before:` to gain graphical effects without any html. – Esailija Jul 26 '12 at 16:17
  • What you do is use [`clone`](http://api.jquery.com/clone) and add a couple classes. – zzzzBov Jul 26 '12 at 16:17
  • Thanks for the comments, guys. If Esailija is right, I then I guess I'll try to implement your idea, zzzzBov. I just wondered whether there was a simple way to accomplish this effect without cloning the whole card. – ihake Jul 26 '12 at 16:24
  • 1
    Since I cannot edit my comment anymore, here's an example of shadow dom: http://cssarrowplease.com/ the arrow in the div is not html at all. – Esailija Jul 26 '12 at 16:24
  • Interesting... I've actually used that before, but didn't understand how it worked. – ihake Jul 26 '12 at 16:36
  • Cloning on each drag would be inefficient and, if not managed properly, prone to memory leakage. Personally, I would hard-code a single `` node in HTML and reuse it with eg. `.attr('src', ...)`, `.show()`, `.appendTo(...)`, `.hide()`. – Beetroot-Beetroot Jul 26 '12 at 16:37
  • Good thought... the problem in my case is that each card is different, so I wouldn't be able to make an image that worked for all of them. – ihake Jul 26 '12 at 16:38
  • Not simultaneously, but presumably it only needs to reflect one card at a time, hence my suggestion to use `.attr('src', ...)` to change the image. – Beetroot-Beetroot Jul 26 '12 at 16:44
  • Oh I get it... unfortunately, the cards are created by the user, so there's no way for me to know ahead of time what any given card will look like. – ihake Jul 26 '12 at 16:55
  • Aha, I was assuming playing cards. If the content is user-generated (as in business cards) then cloning is probably the way ahead. – Beetroot-Beetroot Jul 26 '12 at 18:55

1 Answers1

2

Each DOM element is either not connected to DOM at all or connected to one specific parent. You cannot display same element in two different places. Attaching to a new parent will just move element from old one.

You can either use cloneNode (take care to attach new event handlers to it, as they are not cloned) or make at JS factory that produces some "template" elements and attach each of them to different parents.

Oleg V. Volkov
  • 21,719
  • 4
  • 44
  • 68
  • jQuery clone with true passed will copy the element(s) and event handlers. See: http://docs.jquery.com/Clone – jholloman Jul 26 '12 at 17:25
  • @jholloman, are you sure it will clone handlers added with regular DOM's `.addEventListener`? I know no DOM function that allows to enumerate currently installed events, so somethings tells me jQuery can only clone `.on*` property handlers and those installed through jQuery itself. – Oleg V. Volkov Jul 26 '12 at 17:42
  • That's a good point, I am unaware if it can clone to that level. – jholloman Jul 26 '12 at 17:53