如何禁用 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

在制作动画或拖动以包裹在另一个容器中时，通常更适合使用表单元素。在这种情况下，插入另一个元素定位绝对和更高的 z-index 填充包装容器，并覆盖禁用的输入，因为鼠标事件不会在禁用的元素上注册。通过覆盖输入，用于拖动的 mousedown 将发生在内部跨度上。

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。启用输入时，隐藏或移除内部跨度

演示：为简单起见，使用单击禁用的复选框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]
})