如何禁用HTML頁面中的元素，但能夠使用jQuery拖動它？

Question

我就與鼠標單擊頁面上的一個頁面上的元素通過輸入類似這樣的文件：

$("#sheet").append('<input class="elements" id="Button12" type="button" value="button" />'); 

但我不希望點擊了一段時間，所以我可以將其禁用：

$(".elements").prop('disabled', true); 

但問題是，我想這個元素爲可拖動這樣我就可以移動到頁面上，我試過，但不起作用：

$('.elements').draggable 
({ 
    containment: "#frame", 
    grid: [5,5] 
}) 

元素在不可點擊時如何可拖動？

Answer 1

與形式通常是更好元素當animati ng或拖動以包裝到另一個容器中。在這種情況下，插入另一個位於絕對和更高z-index的元素，填充包裝容器，並覆蓋禁用的輸入，因爲鼠標事件不會在禁用的元素上註冊。通過覆蓋輸入，在內部跨度上將發生拖動。

var input='<span class="element_wrap"><span class="element_wrap_inner"></span>'; 
    input+='<input class="elements" id="Button12" type="button" value="button" disabled+"disabled" /></span>'; 

$("#sheet").append(input); 

$('.elements_wrap').draggable({ 
    containment: "#frame", 
    grid: [5,5] 
}); 

應用適當的css。當使能輸入，隱藏或刪除內寬度

DEMO：上禁用複選框使用點擊簡單http://jsfiddle.net/KtP5K/

Answer 2

$(".elements").children().prop('disabled', true); 

應該

$(".elements").prop('disabled', true); 

因爲.elements是按鈕本身。

和

$("#sheet").append(<input class="elements" id="Button12" type="button" value="button" />); 

應該

$("#sheet").append('<input class="elements" id="Button12" type="button" value="button" />'); // missed quote 

，我認爲你的draggable代碼應該（且必須經過append()語句）

$('.elements').draggable 
({ 
    containment: "#frame", 
    grid: [5,5] 
})