我有一个 div,我想从所有边和 Angular 调整大小,即 nw、n、ne、e、w、sw、s、se。我已经尝试过 jquery ui 的可调整大小的插件,但在我的代码中不起作用。我已经从我的代码中去除了复杂性并将其放在一个非常基本的 fiddle 中。
我试图只调整一个 div 的西北 Angular 的大小,并将该逻辑放在 fiddle 中。逻辑对我来说似乎是正确的,但鼠标交互以一种奇怪的方式工作。
你们能告诉我我做错了什么吗?如果我的左上角是正确的,我可以管理其余的。谢谢。
HTML:
<div id="box">
<div id="nw"></div>
<div id="n"></div>
<div id="ne"></div>
<div id="w"></div>
<div id="e"></div>
<div id="sw"></div>
<div id="s"></div>
<div id="se"></div>
</div>
<p class="one"></p>
<p class="two"></p>
CSS:
#box{border:1px solid #000;width:100px;height:100px;background-color:red;position:absolute;top:100px;left:100px}
#box > div{height:10px;width:10px;background-color:#000;position:absolute}
#nw{top:-5px;left:-5px;cursor:nw-resize}
#n{top:-5px;left:45px;cursor:n-resize}
#ne{top:-5px;right:-5px;cursor:ne-resize}
#w{top:45px;left:-5px;cursor:w-resize}
#e{top:45px;right:-5px;cursor:e-resize}
#sw{bottom:-5px;left:-5px;cursor:sw-resize}
#s{bottom:-5px;left:45px;cursor:s-resize}
#se{bottom:-5px;right:-5px;cursor:se-resize}
p{margin-top:250px;font-size:8px}
JS:
$(function(){
var mousepress = false;
$("#box > div").mousedown(function(e){
mousepress = true;
});
$("#box > div").mousemove(function(e){
if(mousepress) {
var boxX = $("#box").position().left;
var boxY = $("#box").position().top;
var boxW = $("#box").width();
var boxH = $("#box").height();
var x = boxX - e.pageX;//$(this).position().left;
var y = boxY - e.pageY;//$(this).position().top;
$("p.two").append("x: "+x+"<br />");
$(this).css({
"top":y+"px",
"left":x+"px"
});
$("#box").css({
"top":(boxY+y-5)+"px",
"left":(boxX+x-5)+"px",
"width":(boxW+x)+"px",
"height":(boxH+y)+"px",
});
}
});
$("#box > div").mouseup(function(){
mousepress = false;
});
});
**JSFIDDLE:** http://jsfiddle.net/ashwyn/v8qoLj76/2/
最佳答案
在不知道用户按下了哪个内部 div 的情况下,我不太明白你是如何计算盒子的大小和位置的。
我已将其更改为使用鼠标事件位置。
我还将 mousemove
和 mouseup
事件移动到文档中,因为当使用鼠标拖动时,它可能比 DOM 移动得更快并且脱离了框。
我还更改了内部 div 的位置以使用 50%
所以它总是在中间。您可能需要添加一些边距以使其更好地居中。 (参见北与南 - 我在其中一个中添加了 margin-left
)
这对我来说很好用。
http://jsfiddle.net/v8qoLj76/4/
var prev_x = -1;
var prev_y = -1;
var dir = null;
$("#box > div").mousedown(function(e){
prev_x = e.clientX;
prev_y = e.clientY;
dir = $(this).attr('id');
});
$(document).mousemove(function(e){
if (prev_x == -1)
return;
var boxX = $("#box").position().left;
var boxY = $("#box").position().top;
var boxW = $("#box").width();
var boxH = $("#box").height();
var dx = e.clientX - prev_x;
var dy = e.clientY - prev_y;
//Check directions
if (dir.indexOf('n') > -1) //north
{
boxY += dy;
boxH -= dy;
}
if (dir.indexOf('s') > -1) //south
{
boxH += dy;
}
if (dir.indexOf('w') > -1) //west
{
boxX += dx;
boxW -= dx;
}
if (dir.indexOf('e') > -1) //east
{
boxW += dx;
}
$("#box").css({
"top":(boxY)+"px",
"left":(boxX)+"px",
"width":(boxW)+"px",
"height":(boxH)+"px",
});
prev_x = e.clientX;
prev_y = e.clientY;
});
$(document).mouseup(function(){
prev_x = -1;
prev_y = -1;
});
关于javascript - 使用jquery调整div左上角的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33603381/