drag-and-drop 相关问题

我想将文本拖放到图像上方。为此，我使用画布。我正在使用这个代码我想将文本拖放到图像上方。为此，我使用画布。我正在使用这个代码 <img id="scream" src="http://127.0.0.1/demo/images.jpg" alt="The Scream" style="display:none;" width="220" height="277"><p>Canvas:</p> <canvas id="canvas" width="300" height="300" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> var c=document.getElementById("canvas"); var ctx1=c.getContext("2d"); var img=document.getElementById("scream"); ctx1.drawImage(img,10,10); var canvas; var ctx; var x = 75; var y = 50; var dx = 5; var dy = 3; var WIDTH = 400; var HEIGHT = 300; var dragok = false, text = "Hey there im moving!", textLength = (text.length * 14)/2; function rect(x,y,w,h) { ctx.font = "14px Arial"; ctx.strokeText("Hey there im a moving!!", x, y); } function clear() { ctx.clearRect(0, 0, WIDTH, HEIGHT); } function init() { canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); return setInterval(draw, 10); } function draw() { clear(); ctx.fillStyle = "#FAF7F8"; ctx.fillStyle = "#444444"; rect(x - 15, y + 15, textLength, 30); } function myMove(e){ if (dragok){ x = e.pageX - canvas.offsetLeft; y = e.pageY - canvas.offsetTop; } } function myDown(e){ if (e.pageX < x + textLength + canvas.offsetLeft && e.pageX > x - textLength + canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop && e.pageY > y -15 + canvas.offsetTop){ x = e.pageX - canvas.offsetLeft; y = e.pageY - canvas.offsetTop; dragok = true; canvas.onmousemove = myMove; } } function myUp(){ dragok = false; canvas.onmousemove = null; } init(); canvas.onmousedown = myDown; canvas.onmouseup = myUp; 我要么能够显示图像，要么拖放文本，但我两者都想要，请帮助我哪里错了。您可以在这里查看：- http://jsfiddle.net/FWdSv/11/ 当您清除画布时，您也会清除图像。因此，简单的解决方法是在绘图函数中重新绘制图像： function draw() { clear(); ctx.drawImage(img,0,0); ctx.fillStyle = "#FAF7F8"; ctx.fillStyle = "#444444"; rect(x - 15, y + 15, textLength, 30); } 或者：您可以在画布下方显示图像，这样当您清除画布时它不会受到影响。我相信你没有抓住我的重点。我正在画布中创建一个圆形蒙版，因此片段：我没有遵循 rect(x-15, y+15, textLength, 30)。我没有这样的功能，想要使用和偏移确定我的鼠标向上事件，而不是某个固定值。

html drag-and-drop html5-canvas

回答 2 投票 0

使用 React-rnd 拖放后重新移动列

我刚刚开始使用 React。我正在尝试使用 React-Rnd npm 执行拖放以及调整大小。我有一个 2*2 的网格，我将为用户群提供 2-4 个 Rnd 控件...

reactjs drag-and-drop expand window-resize

回答 1 投票 0

在视口边缘拖动时如何防止页面滚动

将内容拖动到溢出页面的边缘时，页面将开始滚动。如何通过本机浏览器功能/样式来防止这种行为？仅在 Firefox 上工作是可以的。（我是...

javascript css firefox drag-and-drop

回答 1 投票 0

如何使用 JavaScript 中应用的缩放比例平移来计算拖动时元素的正确位置

我正在将以下拖放库作为业余项目进行工作。我正在使用变换翻译来使元素可拖动。我存储初始的 client.x 和 client.y 并计算翻译...