可在表单元素上拖动的 jQuery UI答案

【问题标题】：jQuery UI draggable on form elements可在表单元素上拖动的 jQuery UI
【发布时间】：2012-03-26 18:05:52
【问题描述】：

我有一个包含一些表单元素的元素：

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

我用 jQuery UI 让它可以拖动：

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

而form元素占据了可拖动元素中的大部分空间：

#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/

我也尝试过指定'button' 的handle 参数：

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

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

我也尝试将 mousedown 事件传递给可拖动元素：

$('#draggable').draggable()
    .find('button').mousedown(function (e) {
        $('#draggable').trigger(e);
     });

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

有没有办法让可拖动元素可以被它们包含的表单元素拖动？

【问题讨论】：

我遇到了类似的问题，我所做的是在表单元素的“顶部”添加另一个 div 并将其用作句柄。
@CharlesOvando 表单元素仍然可以点击吗？
这个问题有什么更新吗？
我也需要这个。我尝试禁用元素，这有助于阻止点击，但仍然不可拖动。我发现唯一可行的解决方案是为表单元素制作一个几乎透明的 png 覆盖。当然，以后要使用该元素时必须将其删除。

标签： jquery forms jquery-ui jquery-ui-draggable

【解决方案1】：

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

【讨论】：

感谢您的回复。我知道发生这种情况是因为我正在使用表单元素，并且我想在不将表单元素更改为其他类型的情况下解决此问题。

【解决方案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 上与在表单元素上看起来一样。有点痛苦，但它有效。

【讨论】：