Mouse down trigger and draggable cause following exception Uncaught TypeError: Illegal invocation

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

  1. <div class="dragElement" id="8793" style="width: 177.0499793539861px; height: 177.0499793539861px; position: absolute; background-color: rgb(100, 100, 100);">
  2. <div class="image">
  3. <img src="50.png" style="width: 177.0499793539861px; height: 177.0499793539861px">
  4. </div>
  5. </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.

  1. var shadowDivElement = document.createElement('div');
  2. shadowDivElement.id = "shadowElement123"; 
  3. var rect = dragElement.getBoundingClientRect();
  4. shadowDivElement.style.width = rect.right - rect.left + "px";
  5. shadowDivElement.style.height = rect.bottom - rect.top + "px";
  6. shadowDivElement.style.left = rect.left + "px";
  7. shadowDivElement.style.top = rect.top + "px";
  8. shadowDivElement.className = "dragElement";
  9. shadowDivElement.style.backgroundColor = dragElement.style.backgroundColor;

  10. var imgDivElement = dragElement.getElementsByClassName("image");
  11. if (imgDivElement != undefined && imgDivElement.length > 0) {
  12. imgDivElement = imgDivElement[0];
  13. var imgElement = imgDivElement.getElementsByTagName("img");
  14. if (imgElement != undefined && imgElement.length > 0) {
  15. imgElement = imgElement[0];
  16. imgElement.style.width = shadowDivElement.style.width;
  17. imgElement.style.height = shadowDivElement.style.height;
  18. imgDivElement.appendChild(imgElement);
  19. }
  20. var bodyContainer = document.getElementsByTagName("body");
  21. if (bodyContainer.length > 0) {
  22. shadowDivElement.appendChild(imgDivElement);
  23. bodyContainer[0].appendChild(shadowDivElement);
  24. $(shadowDivElement).draggable();
  25. $('#' + shadowDivElement.id + '').trigger(event);

  26. }

  27. }