Django项目中jQuery draggable函数报错：TypeError异常

这个错误很典型——draggable()是jQuery UI提供的交互组件，不是原生jQuery自带的方法！你目前只引入了jQuery核心库，没有加载jQuery UI，所以浏览器找不到这个函数，抛出Uncaught TypeError。

核心解决方案：添加jQuery UI引用 #

1. 引入jQuery UI库 #

你可以通过CDN快速引入，或者下载本地文件放到静态资源目录。在你的jQuery引用之后、自定义JS之前添加这行代码：

<!-- 使用CDN的例子 -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

如果使用本地静态文件，路径要对应你的项目结构：

<script language="JavaScript" type="text/javascript" src="{% static 'blog/static/jquery-ui.min.js'%}"></script>

2. 确保加载顺序正确 #

必须严格按照以下顺序加载资源，否则jQuery UI无法依赖jQuery正常初始化：

• jQuery核心库（jquery-3.2.1.min.js）
• jQuery UI库
• 你的自定义JavaScript文件（mememaker.js、main.js）

额外代码优化建议 #

检查你的createTextArea()函数时，发现一个重复创建文本框的问题：你写了两次相同的文本框创建代码，会导致点击按钮时一次性添加两个可编辑区域。删掉重复的部分，保留一份即可：

function createTextArea() {
    console.log("working")
    // 只保留一次文本框创建逻辑
    var txtAreaHTML = "<div contentEditable='true' class='meme-txt-area'></div>";
    $("#meme-bg-target").append(txtAreaHTML);
    $(".meme-txt-area").draggable({
        containment: "#meme-bg-target",
    });
    $(".meme-txt-area").focus();

    // Impact字体设置逻辑
    $("#btn-fnt").click(function () {
        $(".meme-txt-area").css('color', 'white');
        $(".meme-txt-area").css('font-family', 'impact');
        $(".meme-txt-area").css('text-shadow', '-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black');
        $(".meme-txt-area").css('font-size', '24px');
        fontFamily = "Impact";
        fontColour = "White";
    });

    // Arial字体设置逻辑
    $("#btn-fntA").click(function () {
        $(".meme-txt-area").css('color', 'black');
        $(".meme-txt-area").css('font-family', 'arial');
        $(".meme-txt-area").css('font-size', '24px');
        $(".meme-txt-area").css('text-shadow', 'none');
        fontFamily = "Arial";
        fontColour = "Black";
    });

    // 其他按钮逻辑保留不变
    $('.btn-fi').click(function () {
        $('.meme-txt-area').css({ 'font-size': '+=2' });
        sizeNumber += 2;
    });
    $('.btn-fd').click(function () {
        $('.meme-txt-area').css({ 'font-size': '-=2' });
        sizeNumber -= 2;
    });
    $('.btn-clr').click(function () {
        $('.meme-txt-area').remove();
    });
}

内容的提问来源于stack exchange，提问作者Nisha