javascript - jquery resizable 1px不匹配错误
问题描述
我正在尝试使用带有绝对位置正方形 div 的 jquery 可调整大小的处理程序
但是当我单击“北”和“西”按钮(只有这两个方向)并拖动一点以调整大小时,框本身变小了 1 或 2px
在北处理程序的情况下,例如 (top:100px,height:100px => top:99px,height:99px)
我做错了什么??
element.resizable({
minWidth: 1,
minHeight: 1,
handles:{
'n': '.ui-resizable-n',
'w': '.ui-resizable-w',
'e': '.ui-resizable-e',
's': '.ui-resizable-s'
}
})
这是一个演示链接!
当我将“keeper”项目拖到“screen”并稍微向北移动调整大小处理程序时,方块会出现问题
解决方案
请更改box-sizing: border-box;
为box-sizing: content-box;
.
https://jsfiddle.net/6h02cmvf/
$(document).ready(function() {
$('#container > .ui-element-libraries-container > .ui-element-container').draggable({
opacity: 0.5,
helper: "clone",
appendTo: '#full',
cursor: "move",
revert: true
})
$('#screen').droppable({
drop: (event,ui)=>{
let layoutOffset=$('#screen').offset()
let element=ui.helper.clone().css({
'position': 'absolute',
'opacity': 1,
'left': (ui.position.left-layoutOffset.left)+'px',
'top': (ui.position.top-layoutOffset.top)+'px',
})
element.toggleClass('ui-element-container ui-element')
element.empty()
element.append("<div class='ui-resizable-handle ui-resizable-n'></div>")
element.append("<div class='ui-resizable-handle ui-resizable-s'></div>")
element.append("<div class='ui-resizable-handle ui-resizable-e'></div>")
element.append("<div class='ui-resizable-handle ui-resizable-w'></div>")
element.appendTo('#screen')
element.resizable({
minWidth: 1,
minHeight: 1,
handles:{
'n': '.ui-resizable-n',
'w': '.ui-resizable-w',
'e': '.ui-resizable-e',
's': '.ui-resizable-s'
}
})
ui.helper.remove()
}
})
})
.pane{
color: black;
background-color: white;
position: absolute;
display: block;
overflow: hidden;
border: 2px solid black;
}
#container{
margin: 0px;
left: 300px;
right: auto;
top: 0px;
bottom: 0px;
width: 300px;
height: 500px;
}
#screen{
margin: 0px;
left: 0px;
right: auto;
top: 0px;
bottom: 0px;
width: 300px;
height: 500px;
}
.ui-element-libraries-container{
width:100%;
}
.ui-element-container{
color: black;
background-color: yellow;
border: 1px solid black;
margin-left: -1px;
margin-top: -1px;
width: 33.3%;
min-width: 80px;
max-width: 90px;
height: 100px;
box-sizing: border-box;
text-align: center;
line-height: 12px;
float:left;
font-size: 11px;
position: relative;
overflow: hidden;
cursor: move;
}
.ui-element{
color: black;
background-color: white;
border: 1px solid black;
margin-left: -1px;
margin-top: -1px;
width: 100px;
height: 100px;
box-sizing: content-box;
text-align: center;
line-height: 12px;
float:left;
font-size: 11px;
position: relative;
cursor: move;
}
.ui-resizable-handle{
position: absolute;
width: 7px;
height: 7px;
border: 1px solid blue;
background: white;
display: block;
}
.ui-resizable-n{
top: -4px;
bottom: auto;
left: 50%;
right: auto;
margin-left: -4px;
cursor: ns-resize;
}
.ui-resizable-s{
top: auto;
bottom: -4px;
left: 50%;
right: auto;
margin-left: -4px;
cursor: ns-resize;
}
.ui-resizable-e{
top: 50%;
bottom: auto;
left: auto;
right: -4px;
margin-top: -4px;
cursor: ew-resize;
}
.ui-resizable-w{
top: 50%;
bottom: auto;
left: -4px;
right: auto;
margin-top: -4px;
cursor: ew-resize;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div id="full">
<div id="screen" class="pane">
screen
</div>
<div id="container" class="pane">
keeper
<div class="ui-element-libraries-container">
<div class="ui-element-container">
<div>
b
</div>
</div>
</div>
</div>
</div>
推荐阅读
- facebook - Facebook Graph API - 回复页面帖子中的回复
- typescript - 如何使用 Jest 对此控制器进行正确的单元测试
- r - rvest::html_elements 似乎不尊重嵌套(即,限制只为节点集提供结果)
- rust - 无法在 lib.rs 中导入模块
- html - 如何使用 css grid-template-areas 创建特定的布局形状?
- javascript - 如何在 CSS 中将滑块移动到文本下方?
- r - quanteda 搭配和词形还原
- sql - 更新表中的列,该列具有来自同一列的实际 ID 的临时 ID
- python - 为什么 Pyright 不能正确解析这个模块?
- bash - Bash:检查存储库是否存在表现不稳定?