jQueryUI draggable doesn't work in Wordpress plugin

I'm making a simple plugin in wordpress that shows a draggable element.Here is my code:

?php
/** 
* @package jqcfc
*/
/*
Plugin Name: cfc jq
*/

function page_jq() {
?
!DOCTYPE html
html
head

style
#draggable { width: 150px; height: 150px; padding: 0.5em; background:#eee;}
/style
    
script type=text/javascript
$(function() {
$( #draggable ).draggable();
});
/script
/head
body
div id = draggable class = ui-widget-content
/div
/body
/html
?php
}

function loadui() {
    wp_enqueue_script( 'jquery-ui-draggable', false, array( 'jquery' ));
    wp_enqueue_script( 'jquery-ui-droppable', false, array( 'jquery' ));
}

add_action( 'wp_enqueue_scripts', 'loadui' );
add_shortcode( 'jqpage', 'page_jq') ;
?

I load the short code jqpage in a wordpress page using elementor but dragging animation doesn't work. Can anyone help me?