Creating an RSS based email app with Flickr

Introduction

This is an app that asynchronously loads photos from Flickr as per your request. You can arrange these photos on a nice looking card with easy drag-drop operations and then mail the card to your friends' email id... The most important thing to know is that you do not need even a single refresh of page or to navigate away for anything of above. Another interesting thing is that this app makes use of technologies as varied as ASP.NET and PHP together under one roof. This also proves how nicely our good old JavaScript can bring interoperability to our application..

Dragdrop operation

We need to use some JavaScript for browser specific operations for methods:
1.ondrag
2.ondragend
3.ondrop

The code goes like this:

function st_move(e)
       {
           if(window.event)
           {
            EleSrc = window.event.srcElement.id;
           }
           else
           {
            EleSrc = e.target.id;
           }
           //ondragstart        }
        function drop(e)
        {           
           if(window.event)
           {
           num++;
           EleDest = window.event.srcElement.id;
           var dest = document.getElementById(EleDest);
           var src = document.getElementById(EleSrc);
           dest.innerHTML = "<img id="+EleDest+" ondrop="drop(e)" style="width:150px;height:150px;" src=""+src.getAttribute("src")+"" />";
           window.event.returnValue = true;
           }
           else
           {
           e.preventDefault();
           num++;
           EleDest = e.target.id;
           var dest = document.getElementById(EleDest);
           var src = document.getElementById(EleSrc);
           dest.innerHTML = "img id="+EleDest+" ondrop='drop(e)' style='width:150px;height:150px;' src='"+src.getAttribute("src")+"'/>";
           e.returnValue = true;
           }
      //ondrop event    
        }
        function cancelev(e)
        {
            if(window.event)
            {
            window.event.returnValue = false;
            }
            else
            {
            e.preventDefault();
            }
    //ondragover event
        }

Feed acceptance with PHP

To accept feed in PHP, you can use code like:

$s = "//api.flickr.com/services/feeds/photos_public.gne?tags">http://api.flickr.com/services/feeds/photos_public.gne?tags=" . $p;
$root = simplexml_load_file($s);
$y = 0;
foreach($root->entry as $item)
{
$x = $x + 0.001;
$y = $y + 20;
$str = $item->content;
$start = stripos($str, "<img");>
$end = stripos($str ,"/>");
$org = substr($str, $start, $end - $start);
$start = stripos($org , "http");
$end = stripos($org ," width") - 1;
$link = substr($org, $start, $end - $start);
echo "<img class="images" onclick="img_clk(event)" id="pic",$x,<br mode="hold" />"" ondrop="drop(event)" ondragstart="st_move(event)">
style='left:",$y,"px;z-index:",$x,";position:absolute;
width:110px;height:110px;' src='",$link,"' />";
}
?></img>

This works fine on Internet Explorer, Firefox, Chrome and Safari.