drag and drop

drag and drop functionality

HTML

<!-- dragable image -->
<a href="#?w=976" rel="popup1" id="<?=$album['album_id'].'-'.$data->content_id?>" class="poplight album_photos"><img  id="<?=$album['album_id'].'-'.$data->content_id?>" draggable="true" ondragstart="drag(event)" ondragover="allowDrop(event)" alt="" src="<?=$imagePath?>"></a>
<input type="hidden" id="<?='wall'.$data->content_id?>" value="<?=$data->wall_id?>" />
<input type="hidden" id="<?='type'.$data->content_id?>" value="<?=$data->content_type?>" />
<input type="hidden" id="<?='user'.$data->content_id?>" value="<?=$_SESSION['user_type']?>" />

<!-- dropable area -->

<div class="" style="z-index: 1; position:fixed; right:124px; top:60px" id="div1" ondrop="drop(event);;" ondragover="allowDrop(event);"> <a href="#"><img id="dropzon_image"src="<?php echo IMAGE_PATH_HTTP?>babbler_btn.jpg" alt="" border="0" style="cursor: pointer; cursor: hand; "/></a>
  <div id="overlay" style="display:none;z-index: 2;  position:fixed; right:0px; top:32px; cursor: pointer;border-color: blueviolet;"><img id="drop_image" src="<?php echo IMAGE_PATH_HTTP?>drop_image.jpg" alt="" border="1" style="cursor: pointer; cursor: hand; " /> </div>
</div>

JavaScript

function allowDrop(ev) {
  ev.preventDefault();

}

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
  $("#div1").find("#overlay").slideDown();
  setTimeout(function() {
    $("#overlay").hide();
  }, 4000);

}

function drop(ev) {

  var id = ev.dataTransfer.getData("Text"); /*implimented solution*/

  alert(id);


  ev.preventDefault();
  var action = 'download';
  var wall_id = '62';
  var stat = 'Album';
  var cnt = '0';
  var user_type = 'R';
  var status = do_download(action, wall_id, stat, cnt, user_type);

  $("#overlay").hide();

  // ev.target.appendChild(document.getElementById(data));
}