2

can anyone tell me how can i make an element draggable by cloning it and at the same time changing its id so that i access the cloned element and apply changes over it. I have an application of post its . i want to drag the tag over an area and access that clone element.

2 Answers2

4

Not at all sure, why you want to change id on clone at the same time while dragging. But, why don't you apply the changes to the clone, after you drop it over.

I mean the clone helper any way, will do your thing while dragging. And you make a clone when you drop, and apply other changes (like, changing the id, etc) on that clone.

Something like this.. 

$(document).ready(function(){
                $(".objectDrag").draggable({helper:'clone'});  

                $("#garbageCollector").droppable({
                        accept: ".objectDrag",
                        drop: function(event,ui){
                                        var clone = $(ui.draggable).clone();
                                        $(clone).attr('id', 'new_id')
                                        $(this).append(clone);
                                }
                });

        });
simplyharsh
  • 35,488
  • 12
  • 65
  • 73
  • wouldn't this create 2 clones? the 1 created using the 'clone' helper, and the one created when calling .clone() which will have the ID you specified? – Randyaa May 21 '12 at 15:38
  • The one created by 'clone helper' will be removed by it, after you drop. The one created by you can be appended where you want. – simplyharsh May 23 '12 at 08:17
3

Some hints to what you want to do:

$('#element').clone().attr('id', 'another_id').draggable();

I think the easiest way to generate a new unique id would be to get the old elements id and append something to it. You could try to work with class selectors as well (then you wouldn't have the uniqueness problem).

Daff
  • 43,734
  • 9
  • 106
  • 120