jquery - 你可以使用 $.ui.draggable() 使 div 可拖动吗？

Question

当我使用 Greasemonkey 用户脚本将 $('#id').draggable() 插入 html 页面时，无法正常工作。有没有办法使用 $.ui.draggable() 来使某些东西可拖动？我想要的是这样的:

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

这是我插入 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");
    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);
}

编辑:当我使用 Firebug 控制台进行测试时，它识别出 $ 和 jQuery 存在，并且识别出 $.ui 存在，并且识别出 $.ui.draggable 存在。但是当我尝试使用 $('id').draggable() 制作可拖动的内容时，它失败并出现“$未定义”错误。

谢谢!

Answer 1

事实证明，我已经解决了我的问题。我认为这可能是与我在 Userscripts.org 论坛上看到的其他主题相关的主题，因此如果有人对我的解决方案感兴趣，就在这里。

事实上，问题确实与 jQuery 没有被加载有关，然后 jQuery UI 尝试在加载它之前调用它，然后其他东西尝试在 jQuery UI 上调用而没有加载它。这是我现在使用的工作代码:

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

感谢 Joey Geralnik 提供的解决方案。