Can you make a div draggable using $.ui.draggable()?

I'm having trouble getting $('#id').draggable() to work when I insert it into an html page using my Greasemonkey user script. Is there a way to make something draggable using $.ui.draggable() instead? What I want is something like:

$.ui.draggable(document.getElementById('id'), {'option': 'value'});

Here's the part where I insert the jQuery:

if (!document.getElementById('ccst1')) {
    var ccst1 = document.createElement("script");
    ccst1.id = "ccst1";
    ccst1.src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
    ccst1.type = "text/javascript";
    document.head.appendChild(ccst1);
    var ccst2 = document.createElement("script开发者_JS百科");
    ccst2.id = "ccst2";
    ccst2.src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js";    
    ccst2.type = "text/javascript";
    document.head.appendChild(ccst2);
    var ccst3 = document.createElement("script");
    ccst3.id = "ccst3";
    ccst3.src = "http://yourjavascript.com/3314922191/jquery.scrollTo-min.js";
    ccst3.type = "text/javascript";
    document.head.appendChild(ccst3);
    var ccst4 = document.createElement("script");
    ccst4.id = "ccst4";
    ccst4.type = "text/javascript";
    ccst4.innerHTML = "$(function(){$('#ccpanelmassiveconstruct').draggable({'handle': '#ccpmchandle', 'constrain': 'parent', 'distance': 20, 'cursor': 'move', 'grid': [10,10], 'scroll': true});$('#concealediframe').resizable();$('#ccpmctabs').tabs();});";
    document.head.appendChild(ccst4);
}

EDIT: When I use the Firebug console to test things out, it recognizes that $ and jQuery exist, and it recognizes that $.ui exists, and it recognizes that $.ui.draggable exists. But when I try to make something draggable with $('id').draggable() it fails with "$ is not defined" error.

Thanks!

As it turns out, I've solved my problem. I think this might be a topic related to other I saw on forums for Userscripts.org, so if anybody is interested in my solution, here it is.

The problem did, in fact, have to do with jQuery not being loaded, and then jQuery UI trying to call on that before it was loaded, and then other things trying to call on jQuery UI without THAT being loaded. Here's the working code I'm using now:

var ccst1 = document.createElement("script");
ccst1.id = "ccst1";
ccst1.src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
ccst1.type = "text/javascript";
document.body.appendChild(ccst1);
function ccst2func() {
    var ccst2 = document.createElement("script");
    ccst2.id = "ccst2";
    ccst2.src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js";
    ccst2.type = "text/javascript";
    document.body.appendChild(ccst2);
    ccst2.addEventListener("load", ccst4func, true);
}
ccst1.addEventListener("load", ccst2func, true);

document.body.insertBefore(concealerPanel, document.body.firstChild);

function ccst4func() {
    var ccst4 = document.createElement("script");
    ccst4.id = "ccst4";
    ccst4.type = "text/javascript";
    ccst4.innerHTML = "$('#ccpanelmassiveconstruct').draggable({'handle': '#ccpmchandle', 'constrain': 'parent', 'distance': 20, 'cursor': 'move', 'grid': [10,10], 'scroll': true});\n$('#iframeDragger').resizable();\n$('#ccpmctabs').tabs();";
    document.body.appendChild(ccst4);
}

Thanks to Joey Geralnik for that solution.