你可以使用$ .ui.draggable（）使div可拖動嗎？

我在使用我的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」錯誤。

謝謝！

來源

2011-09-12 BenjaminRH

任何想法爲什麼'$（「＃draggable」）。draggable（）;'不起作用？ –

您是否檢查過JavaScript控制檯的錯誤？你是否確定*你正在使用greasemonkey腳本包含jQuery？ –

我們需要更多的代碼才能看到錯誤 – Jorge

事實證明，我解決了我的問題。我認爲這可能是與我在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提供的解決方案。

來源

2011-09-15 13:22:34 BenjaminRH

感謝您的解決方案 – Kai

你可以使用$ .ui.draggable（）使div可拖動嗎？

回答

相關問題