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

$(".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]
})

Answer 2

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

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/

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

2 个答案: