Failure with SVG on FireFox

[BloodWorkXGaming]

Hello, got a wierd problem when trying to apply a draggable to a svg element. My Stack is: VueJS, vuetify, typescript, plain-draggable

This error only occurs in FireFox, but when trying to drag on chrome, the element just disappears.

[Vue warn]: Error in mounted hook: "[Exception... "Failure"  nsresult: "0x80004005 (NS_ERROR_FAILURE)"  location: "JS frame :: webpack-internal:///./node_modules/plain-draggable/plain-draggable.esm.js :: initSvg :: line 841"  data: no]"

found in

---> <StepElemContainer> at src/components/StepElemContainer.vue
       <VStepper>
         <HelloWorld> at src/components/HelloWorld.vue
           <VContent>
             <VApp>
               <App> at src/App.vue
                 <Root> vue.runtime.esm.js:619
    VueJS 15
    <anonym> main.ts:7
    ts app.js:1336
    __webpack_require__ app.js:786
    fn app.js:151
    1 app.js:1362
    __webpack_require__ app.js:786
    checkDeferredModules app.js:46
    <anonym> app.js:862
    <anonym> app.js:865

When trying a simple example with the svg element not being inside a vuetify element it works without problems.

Thanks for the help.

[anseki]

Hi @BloodWorkXGaming, thank you for the comment. You had better solve the https://github.com/anseki/plain-draggable/issues/43 before this issue because that might be related to your environment.

[BloodWorkXGaming]

Here is a minimal example when it happens: https://jsfiddle.net/m0ykgu5L/6/ As soon it is in a

https://vuetifyjs.com/en/components/steppers

43 is unrelated to this, as it would only provide Quality of Live improvements

[anseki]

mounted is called before the view is rendered. Try this for calling after that was rendered:

    mounted() {
      this.$nextTick(() => {
        let draggable2 = new PlainDraggable(document.getElementById("kreis"))
      });
    }

[BloodWorkXGaming]

Weirdly that works in the fiddle however not in my codebase as it is on a different page which isn't the first one opened.

Like seen here: https://jsfiddle.net/m0ykgu5L/8/

[anseki]

Sorry, my English is poor. Do you mean that that works in the fiddle?

[BloodWorkXGaming]

It works in the fiddle you posted yesterday, however in my new one it doesn't

Works here: https://jsfiddle.net/m0ykgu5L/6/

Doesn't work here: https://jsfiddle.net/m0ykgu5L/8/

[anseki]

You should read my comment again. Anyhow, you have to specify an element that was rendered. For example:

    mounted() {
      // It is better that calling after that was rendered. 
      const target = document.getElementById('kreis');
      target.parentNode.parentNode.parentNode.style.display = '';
      new PlainDraggable(target);
    }

[anseki]

No reply came, then this abandoned issue is closed.