Unable to drag and drop with vue-draggable/sortable.js

Specification

• Platform: Windows 10
• Versions:
  • pywebview 2.2.1
  • python 2.6.8

Description

I’m building a standalone application in a bit of a complicated way as it will be migrated eventually. It is working for the most part but I can’t get draggable functionality to work in a pywebview window.

I’m using Flask with Vue.js, pywebview, then packaging with pyinstaller. I’m building the vue.js frontend into static files and using pywebview to display the static content served by flask. It is then being put into a single executable with pyinstaller.

All of the functionality works except I am using vue-draggable that uses sortable.js and that functionality seems to be failing only in the pywebview window.

When I launch the executable, I can access the webserver that is run via local browsers and also from the pywebview window. Chrome 72, Edge 16 and IE 11 all work and allow draggable elements between lists, but the pywebview window does not allow it even though it is telling me it is running using IE 11.

web-client check script

navigator.sayswho= (function(){
    var ua= navigator.userAgent, tem,
    M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if(/trident/i.test(M[1])){
        tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
        return 'IE '+(tem[1] || '');
    }
    if(M[1]=== 'Chrome'){
        tem= ua.match(/\b(OPR|Edge)\/(\d+)/);
        if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
    }
    M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
    return M.join(' ');
})();

console.log(navigator.sayswho);

Asks

Honestly I am unsure where to even begin looking to understand why the dragging isn’t working. I have tried turning on text-select=True and debug=True, but neither seems to have helped with the dragging problem.

Is this a known issue or is there a quick fix? I saw the PR with CEF and thought that might be a possible option/fix if that comes out within the next few days, but if there is an immediate alternative, I would be grateful.

My current build command for pyinstaller is

pyinstaller --name="flasktest" --add-data="frontbuild\*;frontbuild" --add-data "C:\Users\<user>\AppData\Local\Programs\Python\Python36\Lib\site-packages\webview\lib\WebBrowserInterop.x64.dll;./" --onefile -y ./backend/srv.py

My current create.window command for pyinstaller is

webview.create_window(
                webview_name,
                "http://127.0.0.1:23948",
                width=width,
                height=height,
                text_select=True,
                debug=True
            )

[ghost]

@r0x0r After many hours of attempting the switch to CEF with pywebview I’ve given up and I’m sticking to ie11 and trident for the time being… There are just too many factors from what I can see trying to make it into a single executable and I need it working for the interim.

I would be up for working together with you to bake in the logic though.

[ghost]

@r0x0r All of the following was over many hours and lots of testing to narrow down exactly what was breaking.

---

I created a fresh vue-cli 3 project using vue create <project_name> and vue 3.4.0

I did a manual install and enabled Typescript, Router, and CSS Pre-Processors. I then selected ESLint + Airbnb config, lint on save, and in package.json, etc… After these steps, the draggable code did not work.

I then proceeded to remove each of the manual package additions incrementally until it worked. After removing each manual thing and then finally resorting to a default package install, I was still not successful in getting the draggable function to work.

All these iterations worked within a browser at the same time as the executable was open (so the server was serving the same static files to both pywebview and ie/edge/chrome at the same time). This leads me to believe it is a problem with pywebview instead of posting in vue-draggable about the issue. Even when running pywebview in CLI without packaging, the draggable option still does not work.

I am working to determine what the vue-draggable team did differently in their example compared to a fresh installation of vue-cli that causes their version to build and work correctly.

As of right now I found out that if I do a fresh vue-cli, the example vue-draggable code AND THEN take their package-lock.json, it works with pywebview. This was really strange and I was dreading continuing seeing as I know how immense a package-lock file is…

I eventually have narrowed it down to a specific difference in packages in the package-lock.json (NOT the package.json)

"sortablejs": {
      "version": "1.8.1",
      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.8.1.tgz",
      "integrity": "..."
    },

broke the functionality, but

"sortablejs": {
      "version": "1.7.0",
      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.7.0.tgz",
      "integrity": "..."
    },

made it work.

Something in the change from 1.7 to 1.8.1 breaks pywebview in some way. Making this change in package-lock.json fixes everything!

Please let me know if I can help in any way to identify what changes caused pywebview from preventing the dragging and dropping functionality to stop between Sortable.js v1.7.0 to v1.8.1!