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');}
}