Javascript Drag and Drop Example.

Open video
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Javascript Drag and Drop Example.</title>

<style type="text/css">
<!--
.vidFrame { 
             position: absolute;
             display: none;
             background-color: #ffdead;
             border: 1px solid #800000;
             width: 435px;
             height: 362px;
             cursor: move;
          }
-->
</style>

<script language="JavaScript" type="text/javascript">
<!--
   function playVid(vidId) {
      if (vidPaneID.style.display=='block') {
         vidPaneID.style.display='none';
         vidPaneID.innerHTML=''; 
      } else {
         vidPaneID.style.display='block';
         vidPaneID.innerHTML='<A HREF="javascript:playVid()">CLOSE</A>';
         var vidstring ='<center><embed enableJavascript="false" allowScriptAccess="never"';
         vidstring+=' allownetworking="internal" type="application/x-shockwave-flash"';
         vidstring+='  src="http://www.youtube.com/v/'+vidId+'&autoplay=1" ';
         vidstring+=' wmode="transparent" height="350" width=425"></center>';
         vidPaneID.innerHTML+=vidstring;
      }
   }

   function moveHandler(e){
      if (e == null) { e = window.event } 
      if (e.button<=1&&dragOK){
         savedTarget.style.left=e.clientX-dragXoffset+'px';
         savedTarget.style.top=e.clientY-dragYoffset+'px';
         return false;
      }
   }

   function cleanup(e) {
      document.onmousemove=null;
      document.onmouseup=null;
      savedTarget.style.cursor=orgCursor;
      dragOK=false;
   }

   function dragHandler(e){
      var htype='-moz-grabbing';
      if (e == null) { e = window.event; htype='move';} 
      var target = e.target != null ? e.target : e.srcElement;
      orgCursor=target.style.cursor;
      if (target.className=="vidFrame") {
         savedTarget=target;       
         target.style.cursor=htype;
         dragOK=true;
         dragXoffset=e.clientX-parseInt(vidPaneID.style.left);
         dragYoffset=e.clientY-parseInt(vidPaneID.style.top);
         document.onmousemove=moveHandler;
         document.onmouseup=cleanup;
         return false;
      }
   }
	 
	 document.onmousedown=dragHandler;
//-->
</script>


</head>

<body>

<A HREF="javascript:playVid('s4_4abCWw-w')">Open video</A>
<div id='vidPane' class='vidFrame'></div>


<script language="JavaScript" type="text/javascript">
<!--
   var savedTarget=null; // The target layer (effectively vidPane)
   var orgCursor=null;   // The original Cursor (mouse) Style so we can restore it
   var dragOK=false;     // True if we're allowed to move the element under mouse
   var dragXoffset=0;    // How much we've moved the element on the horozontal
   var dragYoffset=0;    // How much we've moved the element on the verticle
   vidPaneID = document.getElementById('vidPane'); // Our movable layer
   vidPaneID.style.top='75px';                     // Starting location horozontal
   vidPaneID.style.left='75px';                    // Starting location verticle
//-->
</script>

</body>

</html>