javascript - Django Jquery TypeError : $(. ..).draggable 不是函数

Question

我有一个在前端使用 Jquery 的 Django 应用程序，但是某些 Jquery 函数无法正常工作。当 HTML/CSS 单独运行时，代码在 Django 应用程序之外按预期工作。

我像这样包含了 Jquery 和 javascript:

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

这是我的javascript文件

$(document).ready(function () {
  console.log("mememaker working!");

  //setting default font 

  var fontSize = "24px";
  var sizeNumber = 24;
  var fontFamily = "Arial";
  var fontColour = "Black"

  //Choose meme picture

  $('#fry').click(function () {
    console.log("add fry")
    $('#meme-bg-target img').attr('src', "{% static 'blog/static/Fry.png'%}");
    $('#meme-bg-target img').width(550); // Units are assumed to be pixels
    $('#meme-bg-target img').height(420);
  });

  $('#spongebob').click(function () {
    console.log("spongebob")
    $('#meme-bg-target img').attr('src', "{% static 'blog/static/Spongebob.png'%}");
    $('#meme-bg-target img').width(550); // Units are assumed to be pixels
    $('#meme-bg-target img').height(420);
  });

  $('#leow').click(function () {
    $('#meme-bg-target img').attr('src', "{% static 'blog/static/LeoW.png'%}");
    $('#meme-bg-target img').width(550); // Units are assumed to be pixels
    $('#meme-bg-target img').height(420);
  });

  //Upload function



  //Textbox area


  //Preview function
  $('.btn-prvw').click(function () {
    $('#meme-canvas-container').css({
      'display': 'block'
    });
  });
  //Close the preview
  $('.btn-close').click(function () {
    $("#meme-canvas-container").css({
      'display': 'none'
    });
  });

  //Canvas

  function copyToCanvas(htmlElement, font) {
    var canvas = document.getElementById("meme-preview");
    var ctx = canvas.getContext("2d");

    // ctx.font = font;
    // ctx.fillText(text, 10, 10);

    image = new Image(0, 0);
    image.onload = function () {
      canvas.width = this.naturalWidth;
      canvas.height = this.naturalHeight;

      var top = 0;
      var left = 0;
      var cellspace = 0;
      var memeTargetWidth = $("#meme-bg-target").width();
      var memeTargetHeight = $("#meme-bg-target").height();

      //Draw font onto canvas

      ctx.drawImage(this, 0, 0);

      $(".meme-txt-area").each(function () {

        cellspace = parseInt($(this).css("padding"));
        left = parseInt($(this).css("left")) + cellspace;
        top = parseInt($(this).css("top")) + 4.5 * cellspace;
        ctx.font = font;
        ctx.fillStyle = fontColour;
        ctx.strokeStyle = 'black'; //adding border to text
        ctx.fillText($(this).text(), left, top);
        ctx.strokeText($(this).text(), left, top);
      });
    };


    //Retreiving image for canvas    

    image.src = $("#img-meme-bg").attr("src");
  }

  //Display font on canvas 

  $(document).ready(function (e) {
    $(".btn-prvw").on('click', function () {
      var font = sizeNumber.toString() + "px" + " " + fontFamily;
      console.log(font);
      copyToCanvas($('#meme-bg-target'));
      copyToCanvas($('.meme-txt-area'), font);
    });

  });
});

function createTextArea() {
  console.log("working")
  //Impact font 
  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();
  $("#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 font
  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();
  $("#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";
  });
  //Changing the size of the text
  $('.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;
  });

  //Clear function
  $('.btn-clr').click(function () {
    $('.meme-txt-area').remove();
  });

}

function showPreview(objFileInput) {
  if (objFileInput.files[0]) {
    var fileReader = new FileReader();
    fileReader.onload = function (e) {
      $("#meme-bg-target img").attr('src', e.target.result);
    }
    fileReader.readAsDataURL(objFileInput.files[0]);
  }

  //Setting size of the meme to be the same as the default memebox

  $('#meme-bg-target img').width(550); // Units are assumed to be pixels
  $('#meme-bg-target img').height(420);
}

当使用调用 createTextArea() 的函数时，此错误出现在 Javascript 控制台中

Uncaught TypeError: $(...).draggable is not a function
    at createTextArea (mememaker.js:127)
    at HTMLButtonElement.onclick ((index):141)

任何帮助将不胜感激

Answer 1

因为 draggable 是 JqueryUI 组件，所以您首先必须将 css 和 js 链接到您正在使用的文件。

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

和jquery main js之后的这个js

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>