I'm currently doing my final year project that need to develop a web.
I'm currently developing to drag a picture into a div and make a copy inside of it in the position I dropped. I succeed to get the coordinates of clientX and clientY but unable to drop on that coordinates. Any ideas on how to drop on it by using Javascript and HTML5 ?
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
window.alert( ev.clientX + ',' + ev.clientY);
var data = ev.dataTransfer.getData("text");
var nodeCopy = document.getElementById(data).cloneNode(true);
ev.target.appendChild(nodeCopy);
ev.stopPropagation();
return false;
}
#div1 {
width:500px;height:500px;padding:10px;border:5px solid #aaaaaa;float:left;
}
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event) " > Drop here </div>
<img id="drag1" src="images/shoe.jpg" draggable="true" ondragstart="drag(event)" width="100" height="100">
<img id="drag2" src="images/LZK-Logo.jpg" draggable="true" ondragstart="drag(event)" width="100" height="100">
div1 is the place that I want dropped my drag1 and drag2 on. Just I could not fix the position problem. Any idea ?.
You just need to set the position of your nodeCopy.
var nodeCopy = document.getElementById(data).cloneNode(true);
nodeCopy.setAttribute("style","position:absolute; top:" + ev.clientY + "px; left:" + ev.clientX + "px;");
ev.target.appendChild(nodeCopy);
with this the left upper corner of your image is positioned where your mouse was when you dropped the image.
Related
I have the following script that I put together with part of another, what I need is to change the images by dragging the red heart to the blue one, the blue takes the place of the red and vice versa.
Today the trawler wipes out the old ones.
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag2"
src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/256/Heart-red-icon.png"
draggable="true" ondragstart="drag(event)" width="50px">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag1"
src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/256/Heart-blue-icon.png"
draggable="true" ondragstart="drag(event)" width="50px">
</div>
Javascript:
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var id = ev.dataTransfer.getData("text");
var element = document.getElementById(id)
var div = document.getElementById(id).parentNode;
var clonedHeart = document.getElementById(ev.target.id).cloneNode(true);
ev.target.parentNode.insertBefore(element, ev.target.id.nextSibling)
document.getElementById(ev.target.id).remove();
div.appendChild(clonedHeart);
ev.dataTransfer.clearData();
}
I hope this help you.
I am trying to make a feature of my website where there are multiple pictures and you have to drag an icon ( Turtle ) into a box. I managed to find some codes for what happen if you drag the correct icon.
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
window.location.assign("homepage.html");
}
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="turtle.ico" draggable="true" ondragstart="drag(event)"
width="100" height="100">
<img draggable="true" width="100" height="100" src="fish.ico">
I am now having trouble of writing the code for what happen if you drag the wrong icon (fish.ico) . I am planning for it to have a prompt, saying "Try again" but can't find out how to do it. Can someone help me create of function to do that?
If you have a proper id setup per image you can check if the data in the drop event is turtle.
See below.
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
if (data !== "turtle") {
alert("Try again!");
return;
}
var img = document.getElementById(data);
ev.target.appendChild(img);
}
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
drop here
</div>
<img id="turtle" src="turtle.ico" draggable="true" ondragstart="drag(event)" width="100" height="100" />
<img id="fish" src="fish.ico" draggable="true" ondragstart="drag(event)" width="100" height="100" />
I'm creating an application with the image of a christmas tree that is placed in a canvas element , where there is the possibility of drag images over it . After the tree is decorated with the draggable images, the user has to be able to save the entire composition (canvas + images) as a PNG file . The problem is: when I drag the images to the canvas, they are hidden behind the christmas tree. Can you please help me to fix it?
Here's the code:
<html>
<head>
<script>
function allowDrop(e)
{
e.preventDefault();
}
function drag(e)
{
//store the position of the mouse relativly to the image position
e.dataTransfer.setData("mouse_position_x",e.clientX - e.target.offsetLeft );
e.dataTransfer.setData("mouse_position_y",e.clientY - e.target.offsetTop );
e.dataTransfer.setData("image_id",e.target.id);
}
function drop(e)
{
e.preventDefault();
var image = document.getElementById( e.dataTransfer.getData("image_id") );
var mouse_position_x = e.dataTransfer.getData("mouse_position_x");
var mouse_position_y = e.dataTransfer.getData("mouse_position_y");
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var imageObj=new Image();
imageObj.onload=function(){
ctx.save();
ctx.drawImage(this,0,0,canvas.width,canvas.height);
ctx.restore();
}
imageObj.src="bg.png";
// the image is drawn on the canvas at the position of the mouse when we lifted the mouse button
ctx.drawImage( image , e.clientX - canvas.offsetLeft - mouse_position_x , e.clientY - canvas.offsetTop - mouse_position_y );
}
function convertCanvasToImage() {
var canvas = document.getElementById('canvas');
var image_src = canvas.toDataURL("image/png");
window.open(image_src);
}
</script>
<style type="text/css">
body {
text-align: center;
}
#wrapper {
text-align: left;
width: 870px;
height:566px;
margin-left: auto;
margin-right: auto;
}
#options{
width: 70px;
height:566px;
float:left;
}
#options img {
margin-bottom: 15px;
}
#canvas{
width:800px;
height:566px;
float:left;
background-image:url(../images/bg.png);
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="options">
<img id="img1" draggable="true" ondragstart="drag(event)" src='estrela.png'>
<img id="img2" draggable="true" ondragstart="drag(event)" src='bola.png'>
<img id="img3" draggable="true" ondragstart="drag(event)" src='sino.png'>
<img id="img4" draggable="true" ondragstart="drag(event)" src='bota.png'>
<img id="img5" draggable="true" ondragstart="drag(event)" src='anjo.png'>
<img id="img6" draggable="true" ondragstart="drag(event)" src='laco.png'>
</div>
<canvas id="canvas" onDrop="drop(event)" onDragOver="allowDrop(event)" width="800" height="566"></canvas>
<input type="button" onClick="convertCanvasToImage()" value="Gerar Imagem" style="float:right"/>
</body>
Thanks!
Check out this post which allows you to drag images from a toolbar and drop them on the canvas:
HTML5 drag and drop images from a toolbar to a canvas
When you're done creating your tree, you can save the canvas as an image by converting it to an image and displaying the image in a new browser tab. The user can then right-click-save that image to their local drive:
$("#save").click(function(){
var html="<p>Right-click on image below and Save-Picture-As</p>";
html+="<img src='"+canvas.toDataURL()+"' alt='image from canvas'/>";
var tab=window.open();
tab.document.write(html);
});
Some browsers (Chrome, Firefox) even allow the user to right-click the canvas element itself and save it as an image.
I'm dragging an html element and dropped to a canvas, took the location where released and plot the object at same location at canvas. But showing at the different location. See my code.
Script
function init() {
var canvas = document.getElementById("graphCanvas");
var context = canvas.getContext("2d");
context.lineWidth = 2;
}
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
document.getElementById("graphCanvas").getContext("2d").drawImage(document.getElementById(data),
ev.clientX, ev.clientY);
}
HTML
<body onload="init();">
<canvas id="graphCanvas" ondrop="drop(event)" ondragover="allowDrop(event)" height=300 width=300 style="border:1px solid #000000;"></canvas>
<img id="img1" src="http://static.tumblr.com/vcbmwcj/foumiteqs/arrow_up_alt1.svg" draggable="true" ondragstart="drag(event)"/>
</body>
Fixed. Updated code is http://jsfiddle.net/YXxsH/5/. Calculations are done with pageX and pageY and image offset values.
I want to take the screenshot of the result of drag and drop, but I don't know how to do.
Actually, I found 2 javascript and using HTML5 such as html2canvas and canvas2image.
I am now combining them together, but it's still meet some problem with the canvas2image.
Please help me solve this problem if you have same experience, thank you a lot.
Please help me, I've been stock here for days.
Drag and drop code.
<script>
$(function() {
$( "#draggable" ).draggable();
$( "#draggable2" ).draggable();
$( "#droppable" ).droppable({
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
</script>
Image generation code
<script>
window.onload = function() {
function convertCanvas(strType) {
if (strType == "JPEG")
var oImg = Canvas2Image.saveAsJPEG(oCanvas, true);
if (!oImg) {
alert("Sorry, this browser is not capable of saving " + strType + " files!");
return false;
}
oImg.id = "canvasimage";
oImg.style.border = oCanvas.style.border;
oCanvas.parentNode.replaceChild(oImg, oCanvas);
}
function convertHtml(strType) {
$('body').html2canvas();
var queue = html2canvas.Parse();
var canvas = html2canvas.Renderer(queue,{elements:{length:1}});
var img = canvas.toDataURL();
convertCanvas(strType);
window.open(img);
}
document.getElementById("html2canvasbtn").onclick = function() {
convertHtml("JPEG");
}
}
</script>
HTML code
<body>
<h3>Picture:</h3>
<div id="draggable">
<img src='http://1.gravatar.com/avatar/1ea64135b09e00ab80fa7596fafbd340? s=50&d=identicon&r=R'>
</div>
<div id="draggable2">
<img src='http://0.gravatar.com/avatar/2647a7d4b4a7052d66d524701432273b?s=50&d=identicon&r=G'>
</div>
<div id="dCanvas">
<canvas id="droppable" width="500" height="500" style="border: 2px solid gray" class="ui-widget-header" />
</div>
<input type="button" id="bGenImage" value="Generate Image" />
<div id="dOutput"></div>
</body>
A working example, without libraries:
<html>
<head>
<script>
function allowDrop(e)
{
e.preventDefault();
}
function drag(e)
{
//store the position of the mouse relativly to the image position
e.dataTransfer.setData("mouse_position_x",e.clientX - e.target.offsetLeft );
e.dataTransfer.setData("mouse_position_y",e.clientY - e.target.offsetTop );
e.dataTransfer.setData("image_id",e.target.id);
}
function drop(e)
{
e.preventDefault();
var image = document.getElementById( e.dataTransfer.getData("image_id") );
var mouse_position_x = e.dataTransfer.getData("mouse_position_x");
var mouse_position_y = e.dataTransfer.getData("mouse_position_y");
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// the image is drawn on the canvas at the position of the mouse when we lifted the mouse button
ctx.drawImage( image , e.clientX - canvas.offsetLeft - mouse_position_x , e.clientY - canvas.offsetTop - mouse_position_y );
}
function convertCanvasToImage() {
var canvas = document.getElementById('canvas');
var image_src = canvas.toDataURL("image/png");
window.open(image_src);
}
</script>
</head>
<body>
<div style="float:left" >
<div>
<img id="img1" draggable="true" ondragstart="drag(event)" src='img1.png'>
<img id="img2" draggable="true" ondragstart="drag(event)" src='img2.png'>
<input type="button" onclick="convertCanvasToImage()" value="Generate Image" style="float:right"/>
</div>
<canvas id="canvas" ondrop="drop(event)" ondragover="allowDrop(event)" width="500" height="500" style="border: 1px solid gray" />
</div>
</body>
The images must have the same origin in order to use toDataURL.
The resulting image is open on a new window, as in your code, but you can also, append it on the page, save on the disk or upload it on a server.
http://fiddle.jshell.net/gael/GF96n/4/