jquery - 输入文本字段可拖动/调整大小不起作用
问题描述
在这个 plunk中,我有一个应用了 jQuery 可调整大小/可拖动的输入字段类型文本。有两个问题。首先,draggable 不起作用。其次,可调整大小仅适用于“东南”句柄,即使我指定了“全部”。霍克斯来解决这个问题?
HMTL
<input type="text" class="field" />
Javascript
$( document ).ready(function() {
$(".field").draggable({ });
$(".field").resizable({
handles: "all"
});
});
解决方案
将 Draggable 分配给文本字段并不好。浏览器期待点击事件进入光标,所以它不会轻易放弃控制。
我会建议以下几点:
$(function() {
$(".field-wrapper").draggable({
handle: ".handle"
})
.resizable({
handles: "all",
resize: function(e, ui) {
var s = ui.size;
$(".field", this).width(s.width - 40).height(s.height);
$(".handle", this).height(Math.round(s.height / 2) + 20).css("margin-top", (Math.round(s.height / 2) - 20) + "px");
}
});
});
.field-wrapper {
width: 245px;
border: 1px inset #ccc;
border-radius: 6px;
padding: 0;
}
.field-wrapper .handle {
display: inline-block;
cursor: move;
}
.field-wrapper .field {
border: 0;
padding: 0;
padding-left: .5em;
margin: -1px 0;
border-left: 1px solid #ccc;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="field-wrapper">
<span class="handle ui-icon ui-icon-grip-dotted-vertical"></span>
<input type="text" class="field" />
</div>
推荐阅读
- python - 在 boto3 中使用 describe_images() 找不到 linux 图像
- mysql - MYSQL WPDataCharts WordPress
- html - CSS Accordion:超链接(a)不继承样式
- json - 如果存在,则从孙子中复制值,否则使用 null
- python - 交叉引用街道和城市名称
- java - 是否有在运行 macOS 10.16 (Big Sur) 的 MacbookPro 中安装 Eclipse 的解决方法
- android - 如何确保 MainActivity 只创建一次
- python - NSWindow 拖动区域应该只在主线程上无效!这将在将来引发异常
- ruby-on-rails - Ruby-on-Rails。therubyracer 的问题(0.12.3)
- javascript - 侧边栏中的jQuery多个表单具有相同的提交