Javascript HTML5拖放不起作用
目前我正在开发html5拖放应用程序,但我在jsfidle网站上找到了这段代码。它工作正常,但当我在本地系统的webstroms编辑器中使用时,它就不工作了。所以,请告诉我我能做些什么,如何解决这些问题Javascript HTML5拖放不起作用,javascript,jquery,html,css,canvas,Javascript,Jquery,Html,Css,Canvas,目前我正在开发html5拖放应用程序,但我在jsfidle网站上找到了这段代码。它工作正常,但当我在本地系统的webstroms编辑器中使用时,它就不工作了。所以,请告诉我我能做些什么,如何解决这些问题 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
// get reference to the canvas and its context
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "16px helvetica";
// variables
// some text objects defining text on the canvas
var texts = [];
// variables used to get mouse position on the canvas
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();
// variables to save last mouse position
// used to see how far the user dragged the mouse
// and then move the text by that distance
var startX;
var startY;
// this var will hold the index of the selected text
var selectedText = -1;
// make the <li> draggable
$("ul li").draggable({
helper: 'clone'
});
// drop on canvas
$("#canvas").droppable({
accept: "ul li",
drop: function (event, ui) {
ctx.fillText($(ui.draggable).clone().text(), ui.position.left - event.target.offsetLeft, ui.position.top - event.target.offsetTop);
var text = $(ui.draggable).clone().text();
var x = ui.position.left - event.target.offsetLeft;
var y = ui.position.top - event.target.offsetTop;
var width = ctx.measureText(text).width;
var height = 16;
// save this text info in an object in texts[]
texts.push({
text: text,
x: x,
y: y,
width: width,
height: height
});
// draw all texts to the canvas
draw();
}
});
// clear the canvas draw all texts
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < texts.length; i++) {
var text = texts[i];
ctx.fillText(text.text, text.x, text.y);
}
}
// test if x,y is inside the bounding box of texts[textIndex]
function textHittest(x, y, textIndex) {
var text = texts[textIndex];
return (x >= text.x && x <= text.x + text.width && y >= text.y - text.height && y <= text.y);
}
// handle mousedown events
// iterate through texts[] and see if the user
// mousedown'ed on one of them
// If yes, set the selectedText to the index of that text
function handleMouseDown(e) {
e.preventDefault();
startX = parseInt(e.clientX - offsetX);
startY = parseInt(e.clientY - offsetY);
// Put your mousedown stuff here
for (var i = 0; i < texts.length; i++) {
if (textHittest(startX, startY, i)) {
selectedText = i;
}
}
}
// done dragging
function handleMouseUp(e) {
e.preventDefault();
selectedText = -1;
}
// also done dragging
function handleMouseOut(e) {
e.preventDefault();
selectedText = -1;
}
// handle mousemove events
// calc how far the mouse has been dragged since
// the last mousemove event and move the selected text
// by that distance
function handleMouseMove(e) {
if (selectedText < 0) {
return;
}
e.preventDefault();
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
// Put your mousemove stuff here
var dx = mouseX - startX;
var dy = mouseY - startY;
startX = mouseX;
startY = mouseY;
var text = texts[selectedText];
text.x += dx;
text.y += dy;
draw();
}
// listen for mouse events
$("#canvas").mousedown(function (e) {
handleMouseDown(e);
});
$("#canvas").mousemove(function (e) {
handleMouseMove(e);
});
$("#canvas").mouseup(function (e) {
handleMouseUp(e);
});
$("#canvas").mouseout(function (e) {
handleMouseOut(e);
});
</script>
<style type="text/css">
body {
background-color: ivory;
}
#canvas {
border:1px solid red;
}
</style>
</head>
<body>
<ul id="drag">
<li class="new-item">Drag me down1</li>
<li class="new-item">Drag me down2</li>
<li class="new-item">Drag me down3</li>
</ul>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
//获取对画布及其上下文的引用
var canvas=document.getElementById(“canvas”);
var ctx=canvas.getContext(“2d”);
ctx.font=“16px helvetica”;
//变数
//一些文本对象定义画布上的文本
var文本=[];
//用于获取画布上鼠标位置的变量
var$canvas=$(“#canvas”);
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var scrollX=$canvas.scrollLeft();
var scrollY=$canvas.scrollTop();
//保存上次鼠标位置的变量
//用于查看用户拖动鼠标的距离
//然后将文本移动该距离
var-startX;
var startY;
//此变量将保存所选文本的索引
var selectedText=-1;
//使可拖动
$(“ul li”)。可拖动({
助手:“克隆”
});
//放在画布上
$(“#画布”).可拖放({
接受:“ulli”,
drop:函数(事件、用户界面){
ctx.fillText($(ui.draggable.clone().text(),ui.position.left-event.target.offsetLeft,ui.position.top-event.target.offsetTop);
var text=$(ui.draggable.clone().text();
var x=ui.position.left-event.target.offsetLeft;
var y=ui.position.top-event.target.offsetTop;
var width=ctx.measureText(text).width;
var高度=16;
//将此文本信息保存在文本[]中的对象中
文本。推({
文本:文本,
x:x,
y:y,
宽度:宽度,
高度:高度
});
//将所有文本绘制到画布上
draw();
}
});
//清除画布并绘制所有文本
函数绘图(){
clearRect(0,0,canvas.width,canvas.height);
对于(变量i=0;i return(x>=text.x&&x=text.y-text.height&&y在创建页面上的元素之前,脚本正在运行-您应该在加载时运行它
您有jQuery,因此可以使用它来实现这一点。只需按如下方式更改代码:
$(function() {
// the javascript
}
您可以在正文中应用script
。您可以使用此代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<style type="text/css">
body {
background-color: ivory;
}
#canvas {
border:1px solid red;
}
</style>
</head>
<body>
<ul id="drag">
<li class="new-item">Drag me down1</li>
<li class="new-item">Drag me down2</li>
<li class="new-item">Drag me down3</li>
</ul>
<canvas id="canvas" width=300 height=300></canvas>
<script type="text/javascript">
// get reference to the canvas and its context
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "16px helvetica";
// variables
// some text objects defining text on the canvas
var texts = [];
// variables used to get mouse position on the canvas
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();
// variables to save last mouse position
// used to see how far the user dragged the mouse
// and then move the text by that distance
var startX;
var startY;
// this var will hold the index of the selected text
var selectedText = -1;
// make the <li> draggable
$("ul li").draggable({
helper: 'clone'
});
// drop on canvas
$("#canvas").droppable({
accept: "ul li",
drop: function (event, ui) {
ctx.fillText($(ui.draggable).clone().text(), ui.position.left - event.target.offsetLeft, ui.position.top - event.target.offsetTop);
var text = $(ui.draggable).clone().text();
var x = ui.position.left - event.target.offsetLeft;
var y = ui.position.top - event.target.offsetTop;
var width = ctx.measureText(text).width;
var height = 16;
// save this text info in an object in texts[]
texts.push({
text: text,
x: x,
y: y,
width: width,
height: height
});
// draw all texts to the canvas
draw();
}
});
// clear the canvas draw all texts
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < texts.length; i++) {
var text = texts[i];
ctx.fillText(text.text, text.x, text.y);
}
}
// test if x,y is inside the bounding box of texts[textIndex]
function textHittest(x, y, textIndex) {
var text = texts[textIndex];
return (x >= text.x && x <= text.x + text.width && y >= text.y - text.height && y <= text.y);
}
// handle mousedown events
// iterate through texts[] and see if the user
// mousedown'ed on one of them
// If yes, set the selectedText to the index of that text
function handleMouseDown(e) {
e.preventDefault();
startX = parseInt(e.clientX - offsetX);
startY = parseInt(e.clientY - offsetY);
// Put your mousedown stuff here
for (var i = 0; i < texts.length; i++) {
if (textHittest(startX, startY, i)) {
selectedText = i;
}
}
}
// done dragging
function handleMouseUp(e) {
e.preventDefault();
selectedText = -1;
}
// also done dragging
function handleMouseOut(e) {
e.preventDefault();
selectedText = -1;
}
// handle mousemove events
// calc how far the mouse has been dragged since
// the last mousemove event and move the selected text
// by that distance
function handleMouseMove(e) {
if (selectedText < 0) {
return;
}
e.preventDefault();
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
// Put your mousemove stuff here
var dx = mouseX - startX;
var dy = mouseY - startY;
startX = mouseX;
startY = mouseY;
var text = texts[selectedText];
text.x += dx;
text.y += dy;
draw();
}
// listen for mouse events
$("#canvas").mousedown(function (e) {
handleMouseDown(e);
});
$("#canvas").mousemove(function (e) {
handleMouseMove(e);
});
$("#canvas").mouseup(function (e) {
handleMouseUp(e);
});
$("#canvas").mouseout(function (e) {
handleMouseOut(e);
});
</script>
</body>
</html>
身体{
背景颜色:象牙色;
}
#帆布{
边框:1px纯红;
}
- 将我向下拖动1
- 将我拖下2
- 将我拖下3
//获取对画布及其上下文的引用
var canvas=document.getElementById(“canvas”);
var ctx=canvas.getContext(“2d”);
ctx.font=“16px helvetica”;
//变数
//一些文本对象定义画布上的文本
var文本=[];
//用于获取画布上鼠标位置的变量
var$canvas=$(“#canvas”);
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var scrollX=$canvas.scrollLeft();
var scrollY=$canvas.scrollTop();
//保存上次鼠标位置的变量
//用于查看用户拖动鼠标的距离
//然后将文本移动该距离
var-startX;
var startY;
//此变量将保存所选文本的索引
var selectedText=-1;
//使可拖动
$(“ul li”)。可拖动({
助手:“克隆”
});
//放在画布上
$(“#画布”).可拖放({
接受:“ulli”,
drop:函数(事件、用户界面){
ctx.fillText($(ui.draggable.clone().text(),ui.position.left-event.target.offsetLeft,ui.position.top-event.target.offsetTop);
var text=$(ui.draggable.clone().text();
var x=ui.position.left-event.target.offsetLeft;
var y=ui.position.top-event.target.offsetTop;
var width=ctx.measureText(text).width;
var高度=16;
//将此文本信息保存在文本[]中的对象中
文本。推({
文本:文本,
x:x,
y:y,
宽度:宽度,
高度:高度
});
//将所有文本绘制到画布上
draw();
}
});
//清除画布并绘制所有文本
函数绘图(){
clearRect(0,0,canvas.width,canvas.height);
对于(变量i=0;i return(x>=text.x&&x=text.y-text.height&&y它怎么不工作?控制台上有错误吗?没有错误发生,拖放也不工作。所以它在JSFIDLE上工作,而不是本地工作?是的,先生,当我在webstorm或visual studio 2010中放入代码时它不工作。原始JSFIDLE在哪里?谢谢你的回答,singh