javascript - 如何禁用 HTML 页面中的元素但能够使用 jQuery Draggable 拖动它？

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 索引的元素来填充包装容器，并覆盖禁用的输入，因为鼠标事件不会在禁用的元素上注册。通过覆盖输入，鼠标按下进行拖动将发生在内部跨度上。

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/