Member Avatar for scarletfire

Hi I was wondering if it is possible to create two HTML5 images using div tag and having the script to make them interact and upon colliding with each other they do stuff like reading or activating a log file and maybe create images on the flow.

Or vice versa, using a log file read the content and do stuff with it, like making images move, and create new blinking content...

This is an idea i have for my personal website and would like to include in my resume , as it sounds pretty neat in my head, but I come from a JAVA background and trying to learn HTML5 and CSS3, and a bit of python..

So it would be very helpful if you kind gentleman out there could give me feedbacks on what API or tags or method of implementation that I could try and tackle with..

Thanks for taking time to read this. Would appreciate your input :) x

  • 2 Contributors
  • 5 Replies
  • 141 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by LastMitch
Member Avatar for LastMitch

Hi I was wondering if it is possible to create two HTML5 images using div tag and having the script to make them interact and upon colliding with each other they do stuff like reading or activating a log file and maybe create images on the flow.

Can you explain a little more what do you mean by that? A small code snippet would helpful.

Member Avatar for scarletfire 
<!DOCTYPE HTML>
    <html>
    <head>
    <style type="text/css">
     #div1, #div2
    {float:right; width:200px; height:150px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
    </style>
    <script>
    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));
    }
    </script>
    </head>
    <body>

    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img src="credit-card.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="200" height="160"></div>
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    </body>
    </html>

**What this would do is the credit card image could be dragged from one spot to another, as this is a small test, it works, but my idea is to have a static image to replace one of the boxes and this dragged image when upon contact with the static one, would preoduce a feed back, like display something or notify that card has been detected, i would be replaced by my business card of course, as I like the idea of a NFC recognisable business card, and I would like to display this on my website, but i don't know how to.... Advice??

:)**

Edited by scarletfire
Member Avatar for LastMitch

What this would do is the credit card image could be dragged from one spot to another, as this is a small test, it works, but my idea is to have a static image to replace one of the boxes and this dragged image when upon contact with the static one, would preoduce a feed back, like display something or notify that card has been detected, i would be replaced by my business card of course, as I like the idea of a NFC recognisable business card, and I would like to display this on my website, but i don't know how to.... Advice??

I got no idea what you are doing. If you want a drag and drop then this will make sense if you have a jQuery with it.

Beside HTML5 & CSS3 code you need like a jQuery or javascript code to make this work.

Plus you need to test it out on all browsers to see it looks fine if not then you need to debug the code for that browser.

I"m not familiar with JAVA or Python.

Is this related to a mobile device?

Member Avatar for scarletfire

Hi Yeap I have a script for the for it to be drag and drop but I would like to know if I could make them do stuff upon moving? From one location to another. Say when object A is move to object B, object A would bounce back to its initial spot and object B would have detected movement and then do something like maybe create object C or make an existing object C to blink. Thanks for your feedback, and I am not using Java or Python and this is all Web based for a browser :)

Member Avatar for LastMitch

From one location to another. Say when object A is move to object B, object A would bounce back to its initial spot and object B would have detected movement and then do something like maybe create object C or make an existing object C to blink. Thanks for your feedback, and I am not using Java or Python and this is all Web based for a browser :)

That's more like animation rather than drag and down.

This the closest I have seem with more active movement:

http://active.tutsplus.com/articles/reviews/review-construct-2-a-drag-and-drop-html5-game-maker/

You can take a look at these example:

http://html5demos.com/drag#

http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-tutorial/

All of these are HTML5

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.