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:
- $(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
- $("#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,
- top.copiedObj
= elem.clone(true);
On "Paste",
- var
newElem = top.copiedObj;
- setIdNameAttributes(newElem);
// To increment the name, id attributes of the pasted element
- $('#droppableCanvas').append(newElem);
- //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.