StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POhtml5 canvas drag and drop images
primarykey
Id
13779039
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
2
CommunityOwnedDate
CreationDate
2012-12-08T15:47:26.707
FavoriteCount
0
LastActivityDate
2012-12-08T15:47:26.707
LastEditDate
LastEditorUserId
0
OwnerUserId
1841758
ParentId
0
PostTypeId
1
Score
0
ViewCount
1306
LastEditorDisplayName
text
Body
<p>I have a web page with an HTML5 canvas that's displaying a number of images on the canvas using JavaScript. I also have four 'description areas' on the canvas, which have been drawn using the following JavaScript function:</p> <pre><code>CanvasRenderingContext2D.prototype.drawDescriptionArea = function(x, y, width, height, radius, stroke){ if(typeof stroke == "undefined" ){ stroke = true; } if(typeof radius === "undefined"){ radius = 5; } this.beginPath(); this.moveTo(x + radius, y); this.lineTo(x + width - radius, y); this.quadraticCurveTo(x + width, y, x + width, y + radius); this.lineTo(x + width, y + height - radius); this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); this.lineTo(x + radius, y + height); this.quadraticCurveTo(x, y + height, x, y + height - radius); this.lineTo(x, y + radius); this.quadraticCurveTo(x, y, x + radius, y); this.closePath(); if(stroke){ context.stroke(); } } </code></pre> <p>I want to add drag and drop functionality to the images that I've displayed on the canvas, so that the user can drag each one onto its corresponding description area. When each image is dragged onto its corresponding description area, it should then disappear from the canvas. If an image is dragged to the wrong description area, the image should remain on the canvas, and a message should be displayed stating that the user has made an incorrect selection.</p> <p>I'm currently working on adding the drag and drop functionality to the images, but I'm having a bit of trouble getting this working.</p> <p>I've found an example of what I'm trying to do online, and am trying to follow this, but obviously to make it work in the context I'm using it. The example I'm following is at: <a href="http://html5demos.com/drag" rel="nofollow">http://html5demos.com/drag</a></p> <p>I've viewed the source from this example, and am trying to reuse the code to add the drag and drop functionality to the images on my canvas. This is what I've got so far:</p> <pre><code><!DOCTYPE html> <html> <head> <script src = "kinetic.js" type = "text/javascript"></script> <title>Home</title> <script src = "drawLevelOneElements.js" type = "text/javascript"></script> <script src = "layers&analytics.js" type = "text/javascript"></script> <script src = "startGameDrawGameElementsDrawStartButton.js" type = "text/javascript"></script> <script src = "interaction.js" type = "text/javascript"></script> <script src = "dragAndDrop.js" type = "text/javascript"></script> <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.5.js"></script> <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.1.2.js"></script> <script src="draggable.js"></script> </head> <body onLoad="startGame()"> <section hidden> <img id="StartButton" src="StartButton.png" alt="Start Button" width="179" height="180" href="javascript:drawLevelOneElements();"/> <img id="building" src="images/assets/building.png" alt="Asset" draggable="true" ondragstart="drag(event)"/> <img id="chair" src="images/assets/chair.gif" alt="Asset"/> <img id="drink" src = "images/assets/drink.jpg" alt="Asset"/> <img id="food" src = "images/assets/food.gif" alt="Asset"/> <img id="fridge" src = "images/assets/fridge.png" alt="Asset"/> <img id="land" src = "images/assets/land.jpg" alt="Asset"/> <img id="money" src = "images/assets/money.jpg" alt="Asset"/> <img id="oven" src = "images/assets/oven.jpg" alt="Asset"/> <img id="table" src = "images/assets/table.gif" alt="Asset"/> <img id="van" src = "images/assets/van.jpg" alt="Asset"/> <img id="burger" src = "images/expenses/direct/burger.png" alt="Direct Expense"/> <img id="chips" src = "images/expenses/direct/chips.png" alt="Direct Expense"/> <img id="drink" src = "images/expenses/direct/drink.jpg" alt="Direct Expense"/> <img id="franchiseFee" src = "images/expenses/direct/franchiseFee.jpg" alt="Direct Expense"/> <img id="wages" src = "images/expenses/direct/wages.jpg" alt="Direct Expense"/> <img id="admin" src = "images/expenses/indirect/admin.jpg" alt="Indirect Expense"/> <img id="cleaners" src = "images/expenses/indirect/cleaners.gif" alt="Indirect Expense"/> <img id="electricity" src = "images/expenses/indirect/electricity.gif" alt="Indirect Expense"/> <img id="insurance" src = "images/expenses/indirect/insurance.jpg" alt="Indirect Expense"/> <img id="manager" src = "images/expenses/indirect/manager.jpg" alt="Indirect Expense"/> <img id="rates" src = "images/expenses/indirect/rates.jpg" alt="Indirect Expense"/> <img id="training" src = "images/expenses/indirect/training.gif" alt="Indirect Expense"/> <img id="water" src = "images/expenses/indirect/water.gif" alt="Indirect Expense"/> <img id="burger" src = "images/income/burger.png" alt="Income"/> <img id="chips" src = "images/income/chips.png" alt="Income"/> <img id="drink" src = "images/income/drink.jpg" alt="Income"/> <img id="creditors" src = "images/liabilities/creditors.gif" alt="Liability"/> <img id="electricity" src = "images/liabilities/electricity.png" alt="Liability"/> <img id="food" src = "images/liabilities/food.jpg" alt="Liability"/> <img id="hirePurchase" src = "images/liabilities/hirePurchase.jpg" alt="Liability"/> <img id="loan" src = "images/liabilities/loan.png" alt="Liability"/> <img id="overdraft" src = "images/liabilities/overdraft.jpg" alt="Liability"/> <img id="payeTax" src = "images/liabilities/payeTax.jpg" alt="Liability"/> <img id="tax" src = "images/liabilities/tax.jpg" alt="Liability"/> This code has been added based on example at: http://html5demos.com/drag#view-source Code as far as the end of the section. <div id="bin"></div> <ul> <li><a id="building" href="#"</a></li> <li><a href="#" id="chair"></li> <li><a href="#" id="drink"></li> <li><a href="#" id="food"></li> <li><a href="#" id="fridge"></li> <li><a href="#" id="land"></li> <li><a href="#" id="money"></li> <li><a href="#" id="oven"></li> <li><a href="#" id="table"></li> <li><a href="#" id="van"></li> </ul> <script> var drop = ['Correct!', 'Incorrect!']; var feedback = document.createElement('p'); var msie = /*@cc_on!@*/0; feedback.style.opacity = 1; var imagesToMakeDraggable = document.querySelectorAll('li > a'), el = null; for (var i = 0; i < imagesToMakeDraggable.length; i++){ el = imagesToMakeDraggable[i]; el.setAttribute('draggable', 'true'); addEvent(el, 'dragstart', function(e){ e.dataTransfer.effectAllowed = 'copy'; /*Only dropEffect='copy' will be dropable */ e.dataTransfer.setData('Image', this.id); /*Required otherwise, doesn't work */ }); } var bin = document.querySelector('#bin'); addEvent(bin, 'dragover', function(e){ if(e.preventDefault) e.preventDefault(); /*Allows us to drop */ this.className = 'over'; e.dataTransfer.dropEffect = 'copy'; return false; }); /*To get IE to work */ addEvent(bin, 'dragenter', function(e){ this.className = 'over'; return false; }); addEvent(bin, 'dragleave', function(){ this.className = ''; }); addEvent(bin, 'drop', function(e){ if(e.stopPropagation) e.stopPropagation(); /*Stops the browser from redirecting... why? */ var el = document.getElementById(e.dataTransfer.getData('Image')); el.parentNode.removeChild(el); /*Stupid nom text & fade effect */ bin.className = ''; feedback.innerHTML = drop[parseInt(Math.random() * drop.length)]; var f = feedback.cloneNode(true); bin.appendChild(f); setTimeout(function(){ var t = setInterval(function(){ if(f.style.opacity <= 0){ if(msie) { /*Don't bother with the animation */ f.style.display = 'none'; } clearInterval(t); } else { f.style.opacity -= 0.1; } }, 50); }, 250); return false; }); </script> </section> <h1>Home</h1> <p>The purpose of this website is to teach users the basic principles of running a business by playing the game below. <br /><br /></p> <canvas id="gameCanvas" width="1000" height="500" style="border:1px solid"> Your browser does not support the canvas element. </canvas> <br /><br /> <p>Use this paragraph to enter text that provides the user with instructions for how to play the game. <br /> Update the instructions so that they're appropriate to whatever level the user is currently playing.</p> <script src = "variables&preloadingImages.js" type = "text/javascript"></script> </body> </code></pre> <p></p> <p>I have quite a large number of images that I'm drawing to the canvas, so I've only tried to add the drag and drop functionality to the first group of images to start off with.</p> <p>However, when I now view my page in the browser, having added the code below the line </p> <blockquote> <p>This code has been added based on example at: <a href="http://html5demos.com/drag#view-source" rel="nofollow">http://html5demos.com/drag#view-source</a> Code as far as the end of the section.</p> </blockquote> <p>based on the example found at the webpage I previously mentioned, for some reason, the browser seems to think that the whole page is now a hyperlink (i.e. the cursor is a 'hand' rather than a 'pointer' when hovering over almost anywhere on the entire page, and all of the text and the canvas border have become purple and underlined, as if it was all a hyperlink.</p> <p>If I click anywhere on the page where the cursor has become a 'hand', than all of the text and the canvas border change from purple to red, such as when a hyperlink is clicked.</p> <p>Clicking the 'start button' that's displayed on the canvas calls the function 'drawLevelOneElements()', which draws all of the images and the description areas to the canvas, however it is still not possible to drag and drop and of the images around the canvas.</p> <p>Can anyone see what I'm doing wrong here, and what I need to do to enable the images to be dragged and dropped around the canvas?</p> <p>The code for my 'drawLevelOneImages()' function is:</p> <pre><code>/* This function draws the elements for level 1. */ function drawLevelOneElements(){ /*First, clear the canvas */ context.clearRect(0, 0, myGameCanvas.width, myGameCanvas.height); /*This line clears all of the elements that were previously drawn on the canvas. */ /*Then redraw the game elements */ drawGameElements(); /*Call the function to enable drag and drop */ canvasState(document.getElementById('gameCanvas')); /*Create the four description areas, and place them near the bottom of the canvas */ /*Create boxes with rounded corners for the description areas */ CanvasRenderingContext2D.prototype.drawDescriptionArea = function(x, y, width, height, radius, stroke){ if(typeof stroke == "undefined" ){ stroke = true; } if(typeof radius === "undefined"){ radius = 5; } this.beginPath(); this.moveTo(x + radius, y); this.lineTo(x + width - radius, y); this.quadraticCurveTo(x + width, y, x + width, y + radius); this.lineTo(x + width, y + height - radius); this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); this.lineTo(x + radius, y + height); this.quadraticCurveTo(x, y + height, x, y + height - radius); this.lineTo(x, y + radius); this.quadraticCurveTo(x, y, x + radius, y); this.closePath(); if(stroke){ context.stroke(); } } context.drawDescriptionArea(70, 400, 120, 70); context.font = '25pt Calibri'; context.strokeText('Asset', 90, 440); context.drawDescriptionArea(300, 400, 120, 70); context.strokeText('Liability', 310, 440); context.drawDescriptionArea(540, 400, 120, 70); context.strokeText('Income', 550, 440); context.drawDescriptionArea(750, 400, 180, 70); context.strokeText('Expenditure', 760, 440); /*Now draw the images to the canvas */ /*First, create variables for the x & y coordinates of the image that will be drawn. the x & y coordinates should hold random numbers, so that the images will be drawn in random locations on the canvas.*/ var imageX = Math.floor(Math.random()*100); var imageY = Math.floor(Math.random()*100); var imageWidth = 50; var imageHeight = 50; /*Create a 'table' of positions that the images will be drawn to */ var imagePositionsX = [20, 80, 140, 200, 260, 320, 380, 440, 500, 560]; var imagePositionsY = [20, 60, 100, 140, 180, 220, 260, 300, 340, 380]; /*Draw all images from assetsImageArray */ /*Use a while loop to loop through the array, get each item and draw it. */ var arrayIteration = 0; console.log('All Images Array length: ' + allImagesArray.length); /*Display the length of the array in the console, to check it's holding the correct number of images. */ while(arrayIteration < allImagesArray.length){ //var randomPositionX = Math.floor(Math.random()*10); //var randomPositionY = Math.floor(Math.random()*10); context.drawImage(allImagesArray[arrayIteration], imageX, imageY, imageWidth, imageHeight); /*Declare variables for image height and width, so it can be accessed elsewhere */ //allImagesArray[arrayIteration].setDraggable = "true"; allImagesArray[arrayIteration].setAttribute('draggable', 'true'); console.log(arrayIteration); /*Display the current array position that's being drawn */ arrayIteration = arrayIteration+1; /*Now try changing the values of imageX & imageY so that the next image is drawn to a different location*/ //imageX = imagePositionsX[randomPositionX]; /* imageX+(Math.floor(Math.random()*100)); */ //imageY = imagePositionsY[randomPositionY]; /* imageY+(Math.floor(Math.random()*100)); */ imageX = Math.floor(Math.random()*950); imageY = Math.floor(Math.random()*350); } } </code></pre>
Tags
<javascript><javascript-events><html5-canvas>
Title
html5 canvas drag and drop images
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USsomeone2088
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. COwoohoo .. That's a lot of code to read. Could you fiddle it please?
  singulars
  PostPostId
  POhtml5 canvas drag and drop images
  UserUserId
  USHarsha Venkatram
2. COI've added a JSfiddle here: http://jsfiddle.net/P5wbQ/ but it doesn't display the images in the result panel... what actually happens when I view it in a browser is that a start button is displayed on the canvas, which, when clicked, then displays a load of images as well as the description areas as mentioned in my original question. However the problem with the whole page becoming 'clickable' does appear in the result panel.
  singulars
  PostPostId
  POhtml5 canvas drag and drop images
  UserUserId
  USsomeone2088

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.