0

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

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

但我暂时不想被点击，所以我可以禁用它：

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

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

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

一个元素在不可点击的情况下如何可以拖动？

4

2 回答 2

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]
})
于 2012-06-23T07:04:43.513 回答
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/

于 2012-06-23T07:58:23.560 回答