jQuery Forum

Hi,

I have an application, where User can open any screen(loading HTML into a child iframe), and it loads the HTML elements into it, User can move the objects around in the screen and save the screen.

So, I have screen with Draggable objects in it. Added draggable behavior to elements like below:

1. $(selector).draggable({
           cancel:null,
           revert: 'invalid',
           addClasses: false ,
           cmargin:5,
           stack: { group: selector, min: 1 } ,
           scroll:false,
           grid:[gridSize,gridSize],
           refreshPositions: false,
           cursor: 'crosshair' ,
           appendTo: '#droppableCanvas',
           start: function(event,ui){
               /* events here */
           },stop: function(event, ui) {
               /* events here */
         }
   });
   

And Droppable to a canvas in it, as

1. $("#droppableCanvas").droppable({
         addClasses: false ,
           tolerance: 'fit',
          drop: function(ev, ui){
                /* events here */
         }
   });
   

It is working perfectly in all browsers I use (Chrome & FF). I can move around the objects and save the screen.

Here, I have a feature of "Copy" and "Paste" of these objects in the screen.
I will display these options whenever User right clicks on it using jQuery context menu plugin by Chris Domigan .

When user goes with "Copy", I have below code to copy that element to a variable in Top iframe, so that "Copy" and "Paste" can be performed across different screens,

1. top.copiedObj = elem.clone(true);
   

On "Paste",

1. var newElem = top.copiedObj;
2. setIdNameAttributes(newElem); // To increment the name, id attributes of the pasted element
3. $('#droppableCanvas').append(newElem);
4. //Calling methods to add Draggable and Context menu to the newly pasted element as we do for existing objects.
   

Here, I can do

1. "Copy" and "Paste" in the same screen.
2. "Copy" an object in one screen close it and open another screen, now "Paste" in this new screen(As I stored Copied object in my parent iframe document).

Task1 & Task2 are working correctly in FF.

In Chrome(Version 40.0.2214.111 m ),  Task1 works correctly, and for Task2, it just appends the Object into new screen, later we can not move that pasted object around i.e. the object is no longer Draggable and Context menu also not attaching to the newly pasted object .

This occurs until the screen is saved and exited. Re-Opening the screen then allows the user to move the object(s).

I feel there is something related to "Issues in Chrome, for Clone of an element which is outside of its own DOM" or "Something related to Event Delegation for Draggable in Chrome". I am not sure though.

Please help me in solving this problem(Chrome should be able to move objects after copying to new screen also) in any way that could possible in this scenario.


Thanks in Advance.