Jquery UI failing for My lwc app

Question

I am trying to use the jQuery sortable functionality for my LWC app where I can reorder items in a column and even move them from column to column. I have the jquery and jquery UI libraries loaded in my app but it is still not working. All I keep getting is an error aura_prod.js:956 Uncaught TypeError: Cannot read property 'defaultView' of undefined I have attached the code below:

.HTML

<template>
    <ul class="sortable">
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
      </ul>
       
</template>

.css

.sortable { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 60%; 
}

.sortable li { 
    margin: 0 3px 3px 3px;
    padding: 0.4em; 
    padding-left: 1.5em; 
    font-size: 1.4em; 
    height: 18px; 
}

.sortable li span { 
    position: absolute; 
    margin-left: -1.3em;
}

.js

import { LightningElement,wire } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import jQuery from '@salesforce/resourceUrl/jQuery';
import jQueryUI from '@salesforce/resourceUrl/jQueryUI';


export default class Dragger_Component extends LightningElement {
    @wire(getAccounts) accounts;
    renderedCallback(){
        loadScript(this, jQuery)
        .then(() => {
            console.log('JQuery loaded.');
        })
        .catch(error=>{
            console.log('Failed to load the JQuery : ' +error);
        });

         loadScript(this, jQueryUI)
        .then(() => {
            console.log('JQueryUI loaded.');
            $(this.template.querySelector('.sortable')).sortable();        
            $(this.template.querySelector('.sortable')).disableSelection();
        })
        .catch(error=>{
            console.log('Failed to load the JQueryUI : ' +error);
        });
    }
 }

Answer 1

You need to allow manual DOM manipulation:

<ul class="sortable" lwc:dom="manual">

See Using Third-Party JavaScript Libraries.

See also this question for a complete example of jQuery and DataTable. Note that not all jQuery plugins and versions of jQuery will be compatible with LWC. You may need to try a different version if errors persist.