是否有人有使用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>
提前谢谢。
戈兰
答案 0 :(得分:0)
类似的例子:
<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>
答案 1 :(得分:0)
默认情况下,对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"
});
&#13;
<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>
&#13;