Moveable iframe

by leonardo_ciaccio

HTML

<div id="gam-container" style="display: block !important; left: 10px; top: 10px;"><iframe id="gam-console" allowtransparency="true" src="http://www.grabanymedia.com"></iframe></div>

CSS

#gam-container{
    position: fixed!important;
    right: 15px;
    top: 15px;
    background: transparent!important;
    z-index:999999999999!important;
    overflow: hidden!important;
    box-shadow: rgba(0, 0, 0, 0.33) 0px 0px 4px 2px!important;
    padding: 0px!important;
    margin: 0px!important;
    padding-top: 20px!important;
    width: 300px!important;
    height: 300px!important;
    cursor: move!important;
}
#gam-console{
    position: relative!important;
    left: 0px!important;
    bottom: 0px!important;
    background: transparent!important;
    z-index:auto!important;
    overflow: hidden!important;
    padding: 0px!important;
    margin: 0px!important;
    width: 100%!important;
    height: 100%!important;
}

JavaScript

var 
	mouveable = function( ele ){

    var 
      selected = null

      ,x_pos = 0

      ,y_pos = 0

      ,x_ele = 0

      ,y_ele = 0

      ,_drag_init  = function( elem ){

        selected = elem;

        x_ele = x_pos - selected.offsetLeft;

        y_ele = y_pos - selected.offsetTop;

      }

      ,_move_elem = function( ev ){

        x_pos = document.all ? window.event.clientX : ev.pageX;

        y_pos = document.all ? window.event.clientY : ev.pageY;

        if( selected !== null ){

          selected.style.left = ( x_pos - x_ele ) + "px";

          selected.style.top = ( y_pos - y_ele ) + "px";

        }

      }

      ,_destroy = function() {

        selected = null;

      }
    ; 

    ele.onmousedown = function(){

      _drag_init( ele );

      return false;

    };

    document.onmousemove = _move_elem;

    document.onmouseup = _destroy;

  } 
;

mouveable( document.body.querySelector( "#gam-container" ) );