Html 使用jquery ui:未捕获类型错误：无法读取属性'；用户界面'；未定义的_Html_Jquery Ui

Html 使用jquery ui:未捕获类型错误：无法读取属性'；用户界面'；未定义的

html jquery-ui

Html 使用jquery ui:未捕获类型错误：无法读取属性'；用户界面'；未定义的,html,jquery-ui,Html,Jquery Ui,我试图使用Jquery UI的Dragable和droppable函数将id为“droppable1”的图像拖到一个div中，但我一直收到以下错误： Uncaught TypeError: Cannot read property 'ui' of undefined at jquery-ui.min.js:6 at jquery-ui.min.js:6 at jquery-ui.min.js:6 Uncaught Reference Error: $ is not defined

我试图使用Jquery UI的Dragable和droppable函数将id为“droppable1”的图像拖到一个div中，但我一直收到以下错误：

Uncaught TypeError: Cannot read property 'ui' of undefined
  at jquery-ui.min.js:6
  at jquery-ui.min.js:6
  at jquery-ui.min.js:6

Uncaught Reference Error: $ is not defined

我也得到了这个错误：

Uncaught TypeError: Cannot read property 'ui' of undefined
  at jquery-ui.min.js:6
  at jquery-ui.min.js:6
  at jquery-ui.min.js:6

Uncaught Reference Error: $ is not defined

以下是我的HTML代码：

<!DOCTYPE html>
<html>
    <head>
          <!---materializecss stuff--->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
        <!---my stylesheet--->
        <link rel="stylesheet" href="css/styles.css" />
        <!--- to use jquery widgets, etc --->
        <script
          src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
          integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
          crossorigin="anonymous">

        </script>


    </head>
    <body>

     <div id = "table" class="bottom">
        <div class="col" id= "droppable1">one
            <br/>

            <img class = "clothe-pics drop" id = "clothe-pic" src = "">
        </div>
        <div class="col">two
            <br/>
            <img class = "clothe-pics" id = "pant-pic" src = "">
        </div>
        <div class="col">three
            <br/>
            <img class = "clothe-pics" id = "shoe-pic" src = "">
        </div>
    </div>

    <div id = "table" class="bottom">
        <div class="col">one
            <br/>

            <img class = "clothe-pics drag" id = "draggable1"  src = "https://huckberry.imgix.net/spree/products/244895/original/wNDuXqrQOs_taylor-stitch_yosemite_shirt_0_original.jpg">
        </div>
        <div class="col">two
            <br/>
            <img class = "clothe-pics" id = "pant-pic" src = "">
        </div>
        <div class="col">three
            <br/>
            <img class = "clothe-pics" id = "shoe-pic" src = "">
        </div>
    </div>
    <script>
        var count;
        $(function() {
            $( ".drag" ).draggable({
                revert: true
            });
            $( ".drop" ).droppable({
                drop: function( event, ui ) {
                    /*$( this )
                        .addClass( "ui-state-highlight" )
                        .find( "p" )
                            .html( "Dropped!" );*/
                            createElements(ui.draggable, this);
                }
            });


        });
    </script>
    </body>
</html>


一


二


三


一


二


三


var计数；
$（函数（）{
$（“.drag”）.draggable({
回复：真
});
$（“.drop”）.dropable({
drop：函数（事件、用户界面）{
/*$（本）
.addClass（“ui状态突出显示”）
.查找（“p”）
.html（“已删除！”）*/
createElements（ui.draggable，this）；
}
});
});

我认为我很可能没有正确地编写jquery脚本，但我不确定如何修复它。其他人知道如何解决这个问题或者我为什么会出错吗？

您需要先加载jQuery本身，然后才能加载UI支持库。啊，这就解决了问题，谢谢。