Question

当我使用我的Greasemonkey用户脚本将其插入到html页面时，我无法使$('#id').draggable()工作。有没有办法使用$ .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（）失败并显示“$ is not defined”错误。

谢谢！

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提供的解决方案。

你能用$ .ui.draggable（）创建一个div draggable吗？

1 个答案: