Question

我有一个元素，里面有一些表单元素：

<div id="draggable">
    <button>Drag this</button>
</div>

我使用jQuery UI使其可拖动：

$('#draggable').draggable();

表单元素占用了可拖动元素中的大部分空间：

#draggable {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    background: #efe;
    padding: 10px;
}
#draggable button {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background: rgba(0, 0, 0, .05);
    border: none;
}

我可以单击div并将其拖动，但是如果我在表单元素中单击并尝试拖动，则没有任何反应。试一试：http://jsfiddle.net/ACQrg/

我还尝试指定handle的{{1}}参数：

'button'

不幸的是，这也不起作用。试一试：http://jsfiddle.net/ACQrg/1/

我还尝试将mousedown事件传递给draggable元素：

$('#draggable').draggable({ handle: 'button' });

试一试：http://jsfiddle.net/ACQrg/4/

有没有办法让可拖动元素可以按其包含的表单元素拖动？

Answer 1

这可能是因为按钮正在捕捉点击事件而不是冒泡它们。尝试使用不同的内部元素，例如：http://jsfiddle.net/ACQrg/3/

Answer 2

这可能类似于Tsachi的答案，但我最终做的是创建我的原始容器div，其中包含两个div，一个用于我的输入框，一个用于我的按钮。这很好地拖延了。然后，当用户使用我的系统时，我不在编辑器中，所以当他们点击对象时，我使用jquery用输入框和按钮代码替换div。（我要求用户输入他们的电子邮件并点击提交）

所以在我的编辑器模式中它看起来像这样：

<div id="holder">
    <div class="inputelem">Enter Email</div>
    <div class="buttonelem">Submit</div>
</div>

然后，根据需要拖动它。在运行时，我这样做：

$('#holder').html('<input class="inputelem" type="text" name="email"><input class="buttonelem" type="submit" value="submit">');

唯一的技巧是确保为inputelem和buttonelem定义的类在div上与在表单元素上看起来相同。有点痛，但是有效。

表单元素上的jQuery UI可拖动

2 个答案: