Mouse down trigger and draggable cause following exception Uncaught TypeError: Illegal invocation
Synopsis - Trying to create a ghost div image and attach draggable , mousedown event trigger on it .But fails :(. Details :- I have a div in the body tag which embeds a div image and an image within it. The html for it is
-
- <div class="dragElement" id="8793" style="width: 177.0499793539861px; height: 177.0499793539861px; position: absolute; background-color: rgb(100, 100, 100);">
- <div class="image">
- <img src="50.png" style="width: 177.0499793539861px; height: 177.0499793539861px">
- </div>
- </div>
When the user mouse downs on this div tag, I would like to create a ghost div tag and trigger mouse down on it. But I run into error "Illegal invocation at the line where I invoke the trigger method. Any pointers will be helpful.
-
- var shadowDivElement = document.createElement('div');
- shadowDivElement.id = "shadowElement123";
- var rect = dragElement.getBoundingClientRect();
- shadowDivElement.style.width = rect.right - rect.left + "px";
- shadowDivElement.style.height = rect.bottom - rect.top + "px";
- shadowDivElement.style.left = rect.left + "px";
- shadowDivElement.style.top = rect.top + "px";
- shadowDivElement.className = "dragElement";
- shadowDivElement.style.backgroundColor = dragElement.style.backgroundColor;
-
- var imgDivElement = dragElement.getElementsByClassName("image");
- if (imgDivElement != undefined && imgDivElement.length > 0) {
- imgDivElement = imgDivElement[0];
- var imgElement = imgDivElement.getElementsByTagName("img");
- if (imgElement != undefined && imgElement.length > 0) {
- imgElement = imgElement[0];
- imgElement.style.width = shadowDivElement.style.width;
- imgElement.style.height = shadowDivElement.style.height;
- imgDivElement.appendChild(imgElement);
- }
- var bodyContainer = document.getElementsByTagName("body");
- if (bodyContainer.length > 0) {
- shadowDivElement.appendChild(imgDivElement);
- bodyContainer[0].appendChild(shadowDivElement);
- $(shadowDivElement).draggable();
- $('#' + shadowDivElement.id + '').trigger(event);
-
- }
-
- }