Question

我正在尝试使用jQuery UI使表单元素可拖动。例如，按钮，复选框，文本字段等。到目前为止，我没有运气。你有什么想法如何实现这个目标吗？

Answer 1

也许3年太晚但您可以发送事件并使用以下代码段来获得更预期的行为：

$(".draggable").draggable({
    start: function (event, ui) {
        $(this).data('preventBehaviour', true);
    }
});
$(".draggable").find(":input").on('mousedown', function (e) {
    var mdown = new MouseEvent("mousedown", {
        screenX: e.screenX,
        screenY: e.screenY,
        clientX: e.clientX,
        clientY: e.clientY,
        view: window
    });
    $(this).closest('.draggable')[0].dispatchEvent(mdown);
}).on('click', function (e) {
    var $draggable = $(this).closest('.draggable');
    if ($draggable.data("preventBehaviour")) {
        e.preventDefault();
        $draggable.data("preventBehaviour", false)
    }
});

Answer 2

我认为这最符合你的要求:)它的可拖动+可调整大小的输入元素但你不会失去它们的性质可编辑。

$(function(){
    $('.draggable').draggable().resizable();
});

以下是我的解决方案：my jsFiddle。

Answer 3

输入元素需要可编辑，因此将它们设置为 可拖动 会使它们无法编辑。

将它们包裹在<span>或<div>中，我强烈建议您使用handle 。

Answer 4

另一个选择是将其放入包装器中，并为输入设置此CSS：

enumerate

您将无法输入修改输入的值。

Answer 5

最好的解决方案是将它们放入div或span

jQuery可拖动输入元素

5 个答案: