我有一个前端使用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)
任何帮助将不胜感激
答案 0 :(得分:1)
由于可拖动是JqueryUI组件,因此您首先必须将css和js链接到您正在使用的文件。
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
和jquery主要js之后的这个
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>