/*
********* DragWithStatus ***********
DragWithStatus is a little more comfortable version of the method draggable(). You can make elements draggable with the plugin. The user will get different feedback and information by the moveable elements. You can configure the plugin to change the Mousecursor (when moving over an element), the transparency and the border from the draggable elements to show the user that they are moveable. And you get the x- and y-position of the moving element in the statusline from the browser - if you wish and if the browser will support this.

Live-Demo: http://rjs.de/jquery/rjs_demositepluginDrawWithSatus.html

**** How to use ****

You can refence the library from the server with 
<script type="text/javascript" src="http://rjs.de/jquery/jquery.dragwithstatus.js"></script>  

Or you can download the library and put it on your own server. Then you can reference it in this way:
<script type="text/javascript" src="[your path]/jquery.dragwithstatus.js"></script>

Then you can use it like this:

    * $("#b1").draggWithStatus( {border:"10px inset",opacity:0.1,statusinfo:false});
    * $("#u1").draggWithStatus( {border:"1px outset",opacity:0.7,statusinfo:false});
    * $("h2").draggWithStatus();
    * $("h3").draggWithStatus();

Options

    * border: CSS-Value
    * cursor: CSS-Value
    * opacity: CSS-Value
    * statusinfo: Boolean. Default true, true = shows x- and y-position of the moving element in the statusline from the browser - if the browser will support this

Dokumentation: http://rjs.de/jquery/index.php	
Licence: GPL
Copyright: Ralph Steyer, RJS-EDV-KnowHow, http://www.rjs.de
Version: 1.0 
Date: 28.08.2009
*/

jQuery.fn.draggWithStatus = function(options) {
  var vorgabewerte = jQuery.extend({
     border: "5px outset",
     cursor:"move" ,
     opacity : 0.5,
	 statusinfo:true
  }, options);
  return this.each(function(){
    $(this).css({
      border:vorgabewerte.border, cursor:vorgabewerte.cursor 
    });
    $(this).draggable( {
      start: function(event, ui) { 
        $(this).css({opacity : vorgabewerte.opacity});
      },
      stop: function(event, ui) { 
        status="";
        $(this).css({opacity : 1});
      },
      drag:function(event, ui) { 
	    if(vorgabewerte.statusinfo)
        status="X/Y-Koordinaten: " + 
          event.pageX + "/" + event.pageY;
      }
    });
    }
  );
};