如何使用 jQuery 使文本框可拖动？

Posted 2023-05-08

【中文标题】如何使用 jQuery 使文本框可拖动？

【英文标题】：How to make text box draggable using jQuery?

【发布时间】：2012-05-29 23:10:47

【问题描述】：

有没有人有使用 jQuery 使 html 输入文本框可拖动的经验？

我尝试将文本框包装在 div 中，并使其可调整大小，但不可拖动。 div 和文本框放置在标准的 jQuery UI 对话框中。实际上，我需要两者 - 对话框内的可拖动和可调整大小的 html 输入文本框。

代码如下：

<script type="text/javascript" language="javascript">
    $(document).ready(function() 
        $("#btnShow").click(function(e) 
            $('#dialog').dialog("open");
        );
        $('#dialog').dialog(
            title: "Sample dialog",
            resizable: false,
            autoOpen: false,
            width: 400,
            height: 300,
            buttons: [ text: "OK", click: function()  /* do something */  ,
                 text: "Cancel", click: function()  $(this).dialog("close")  ]
        );
        $('#divText1').draggable(
            containment: "parent",
            cursor: "move"
        ).resizable(
            containment: "parent",
            handles: "e, w"
        );
    );
</script>

    <input id="btnShow" type="button" value="Show" />

    <div id="dialog" title="Dialog Box" style="border: solid 1px black; margin: 0px 0px 0px 0px; padding: 5px 0px 0px 5x;">
        <div id="divText1" style="width: 200px; height: 30px;">
            <input type="text" style="width: 98%;" value="Hello world!" /><br /><br />
        </div>
    </div>

提前谢谢你。

戈兰

【参考方案1】：

默认情况下，input,textarea,button,select,option 类型的元素禁用拖动。您可以使用cancel 选项更改/清除它。

工作代码：

$("#btnShow").click(function(e) 
  $('#dialog').dialog("open");
);
$('#dialog').dialog(
  title: "Sample dialog",
  resizable: false,
  autoOpen: false,
  width: 400,
  height: 300,
  buttons: [
      text: "OK",
      click: function()  /* do something */ 
    ,
    
      text: "Cancel",
      click: function() 
        $(this).dialog("close")
      
    
  ]
);
$('#divText1').draggable(
  cancel: null,
  containment: "parent",
  cursor: "move"
).resizable(
  containment: "parent",
  handles: "e, w"
);

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="btnShow" type="button" value="Show" />

<div id="dialog" title="Dialog Box" style="border: solid 1px black; margin: 0px 0px 0px 0px; padding: 5px 0px 0px 5x;">
  <div id="divText1" style="width: 200px; height: 30px;">
    <input type="text" style="width: 98%;" value="Hello world!" /><br /><br />
  </div>
</div>

【参考方案2】：

类似的例子：

 <script type="text/javascript">
            $(function () 
                $(".draggable").draggable(
                    revert: true,
                    helper: 'clone',
                    start: function (event, ui) 
                        $(this).fadeTo('fast', 0.5);
                    ,
                    stop: function (event, ui) 
                        $(this).fadeTo(0, 1);
                    
                );

                $("#droppable").droppable(
                    hoverClass: 'active',
                    drop: function (event, ui) 
                        this.value = $(ui.draggable).text();
                    
                );
            );
        </script>

【讨论】：

您能详细解释一下吗？

感谢您的链接，但我知道如何拖动和调整 div 的大小。问题是如何使文本框可拖动和调整大小。