need to use variable inside a function globally

I have the following JavaScript code which is inside a function which I am trying to get the soft_left and soft_top variable to be used in other functions. I am having very little if any success. Shown is just the relevant code.

function drawCart()
{
$(".soft_add_wrapper").multidraggable({"containment":"#content"});
$(".soft_add_wrapper").draggable({stop: function(event, ui) { 
  soft_left = $(".ui-draggable").css('left'); 
  soft_top = $(".ui-draggabl开发者_开发技巧e").css('top');}
}

When I put an alert(soft_top) like so it alerts with the value.

$(".soft_add_wrapper").draggable({stop: function(event, ui) { 
       soft_left = $(".ui-draggable").css('left'); 
       soft_top = $(".ui-draggable").css('top');
       alert(soft_top);}

When I put the alert here it does nothing.

function drawCart(index)
{
$(".soft_add_wrapper").multidraggable({"containment":"#content"});
$(".soft_add_wrapper").draggable({stop: function(event, ui) { 
     soft_left = $(".ui-draggable").css('left'); 
     soft_top = $(".ui-draggable").css('top');
     }
     alert(soft_top);
}

And finally when I try to alert(soft_top) in another function it also doesn't work. I understand and have read about scope and global variable and all that evil stuff. Some help would be great!!

Consider storing it in the document via jQuery's data() method - global variables are always annoying to maintain.

$(document).data("myVar", 12345);
$(document).data("myVar"); // returns 12345

Edited: More concrete example:

// soft_left = $(".ui-draggable").css('left');
$(document).data("soft_left", $(".ui-draggable").css('left'));

// get it somewhere else
$(document).data("soft_left")

And yes, you could also use some hidden text-field - you only lose the type. Just use

$('#textfield-soft-left').val($(".ui-draggable").css('left'));
$('#textfield-soft-left').val(); // returns a String

When you add your eventhandler the function wasn't call already and soft_top wasn't set, cause it will be set in the function set will cal when the event is fired. It will be set the first time you drag something.

You could move the scope of the variable:

var soft_left ="";
var soft_top = "";
function drawCart(index) 
{ 
  $(".soft_add_wrapper").multidraggable({"containment":"#content"}); 
  $(".soft_add_wrapper").draggable({
       stop: function(event, ui) 
         {  
           soft_left = $(".ui-draggable").css('left');  
           soft_top = $(".ui-draggable").css('top');
         } 
       alert(soft_top); 
  });
};

This is an expansion on Marcel J's answer

if you want to use the data system, the following is a good start:

function drawCart(index)
{
  $(".soft_add_wrapper").multidraggable({"containment":"#content"});
  $(".soft_add_wrapper").draggable({stop: function(event, ui) { 

  /* I think ui.helper will give you the object reference: http://docs.jquery.com/UI/Draggable. My example uses $(this) just in case */
     $(this).data('soft_left', $(".ui-draggable").css('left')); 
     $(this).data('soft_top', $(".ui-draggable").css('top'));
     }));
  alert($(".soft_add_wrapper").data('soft_top');
}

This is an issue of scope and you must register the variables with the window.

function drawCart() {
  $(".soft_add_wrapper").multidraggable({"containment":"#content"});
  $(".soft_add_wrapper").draggable({stop: function(event, ui) { 
    window['soft_left'] = $(".ui-draggable").css('left'); 
    window['soft_top'] = $(".ui-draggable").css('top');}
}