如何在 HTML 页面中禁用元素，但能够使用 jQuery 拖动它

How to disable an element in HTML page but be able to drag it with jQuery draggable?

本文关键字：元素 jQuery 拖动 能够使 HTML      更新时间：2023-09-26

我通过在文档中输入类似以下内容，在页面上的某处单击鼠标在页面上创建一个元素：

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

但是我不想在一段时间内可点击，所以我可以禁用它：

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

问题是，我希望这个元素是可拖动的，这样我就可以在页面上移动它，我试过这个但不起作用：

$('.elements').draggable
({
    containment: "#frame",
    grid: [5,5]
})
如何在元素不可

单击时可拖动元素？

在制作动画或拖动以换行到另一个容器中时，通常最好使用表单元素。在这种情况下，插入另一个定位为绝对和更高 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/

$(".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]
})
相关文章：