输入文本字段可拖动/可调整大小不起作用 [英] Input text field draggable/resizable not working
本文介绍了输入文本字段可拖动/可调整大小不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在此插件中我有一个输入字段类型的文本,其中jQuery可调整大小/可拖动应用.有两个问题.首先,可拖动不起作用.其次,即使我指定了全部",可调整大小也只能使用东南"句柄. Hox来解决这个问题?
In this plunk I have an input field type text with jQuery resizable/draggable applied. There are two problems. First, draggable doesn't work. Second, resizable only works with a "South East" handle, even though I specified "all". Hox to fix this?
HMTL
<input type="text" class="field" />
JavaScript
Javascript
$( document ).ready(function() {
$(".field").draggable({ });
$(".field").resizable({
handles: "all"
});
});
推荐答案
将Draggable分配给文本字段不好.浏览器预期会发生单击事件以输入光标,因此不会轻易放弃控制.
It not good to assign Draggable to a Text Field. The browser is anticipating a click event to enter the cursor, so it does not give up control easily.
我建议如下:
$(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>
这篇关于输入文本字段可拖动/可调整大小不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文