Javascript Drag and Drop Example.

This is a modified example (proof of concept -- moveable bare images) from the article: http://www.hunlock.com/blogs/Javascript_Drag_and_Drop
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;
          }
.moveable {
             position: absolute;
             cursor: move;
           }          
-->
</style>

<script language="JavaScript" type="text/javascript">
<!--

   var selObj = null;

   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){
         selObj.style.left=e.clientX-dragXoffset+'px';
         selObj.style.top=e.clientY-dragYoffset+'px';
         return false;
      }
   }

   function cleanup(e) {
      document.onmousemove=null;
      document.onmouseup=null;
      selObj.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;
      selObj=target;
      orgCursor=target.style.cursor;
      if (target.className=="vidFrame"||target.className=="moveable") {
         target.style.cursor=htype;
         dragOK=true;
         dragXoffset=e.clientX-parseInt(selObj.style.left);
         dragYoffset=e.clientY-parseInt(selObj.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>
<img src='http://www.hunlock.com/images/mtn.jpg' class='moveable'  id='movePic'>
<div id='vidPane' class='vidFrame'></div>

<script language="JavaScript" type="text/javascript">
<!--
   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
   document.getElementById('movePic').style.left='500px';
   document.getElementById('movePic').style.top='100px';
//-->
</script>

</body>

</html>