Hepimiz html5 kullanarak tuval içerisine sürükle ve bırak işlevini yerleştirebilir miyiz?HTML5 kullanarak tuval içindeki sürükle ve bırak işlevselliği
Asıl gereksinim görüntünün tuvalin içinde yapılması gereken metin kutusuna sürüklenmesidir ... Lütfen fikirlerinizi paylaşın .. Aşağıdaki bağlantıyı sürükleyip bırakmayı öğrenmek için kullandım ama tuvalin içinde yapılmalı. .
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_draganddrop
sen bu eğitimde daha fazla bilgi edinebilirsiniz: Eğer tuval üzerinde öğeleri sürükle ve bu eğitici olasılıkla en iyi eşleşme olup sevdiği söz konusu sınırlı açıklamasından http://html5.litten.com/how-to-drag-and-drop-on-an-html5-canvas/
, bu sesler.
Bu dosyanın ve HTML5 uyumlu tarayıcıda açık yapıştırabilirsiniz gerçek kod ve işe yarayacak:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas Drag and Drop Test</title>
</head>
<body>
<section>
<div>
<canvas id="canvas" width="400" height="300">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>
<script type="text/javascript">
var canvas;
var ctx;
var x = 75;
var y = 50;
var WIDTH = 400;
var HEIGHT = 300;
var dragok = false;
function rect(x,y,w,h) {
ctx.beginPath();
ctx.rect(x,y,w,h);
ctx.closePath();
ctx.fill();
}
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";
rect(0,0,WIDTH,HEIGHT);
ctx.fillStyle = "#444444";
rect(x - 15, y - 15, 30, 30);
}
function myMove(e){
if (dragok){
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetTop;
}
}
function myDown(e){
if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 +
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;
</script>
</section>
</body>
</html>
Merhaba @Mike http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_draganddrop –
'a bir göz atın ve gönderdiğim makale bağlantısındaki talimatları izleyin. Ayrıca, beyaz kutunun etrafındaki siyah kutuyu sürükleyebileceğiniz öğreticinin sonuna yakın bir çalışma örneği de vardır. –
Teşekkür ederim @Mark S. Ama lütfen ben http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_dragand vermek verilen bağlantı üzerinden gitmek onun basit bir javascript kullanmak için kinetik js bu yüzden mümkün olabilir kineticJS'de aynı özelliği nasıl uygulayacağını anlatmak –
Sen sorunla ve işe yaramadı örnek kodu gönderilmesi gerekiyor. –