[英]Resizing div top left corner using jquery
I have a div which I want to resize from all sides and corners, ie nw, n, ne, e, w, sw, s, se. 我有一个div,我想从所有侧面和各个角落调整大小,即nw,n,ne,e,w,sw,s,se。 I have tried jquery ui's resizable plugin but in my code that is not working.
我尝试了jQuery ui的可调整大小的插件,但是在我的代码中不起作用。 I have removed complexity from my code and placed it in a very basic fiddle.
我已经从代码中删除了复杂性,并将其放在了非常基本的小提琴中。
I have tried to resize only north-west corner of a div and put that logic in fiddle. 我试图仅调整div的西北角的大小,并将这种逻辑放在小提琴中。 Logic seems correct to me but mouse interaction is working in a weird way.
逻辑对我来说似乎是正确的,但鼠标交互的工作方式很奇怪。
Can you guys tell me what am I doing wrong here? 你们能告诉我我在做什么错吗? If I get it correct for top left corner I can manage for the remaining ones.
如果我对左上角的设置正确,则可以管理其余的左上角。 Thanks.
谢谢。
HTML: 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: 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: 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/ ** JSFIDDLE:** http://jsfiddle.net/ashwyn/v8qoLj76/2/
I didn't quite understand how you calculated the size and position of the box, without knowing which of the inside divs the user pressed. 我不完全了解您如何计算盒子的大小和位置,却不知道用户按下了哪个内部div。
I have changed it to use the mouse event position. 我已将其更改为使用鼠标事件位置。
I also moved the mousemove
and mouseup
events to the document, because when dragging using the mouse, it may move faster then the DOM and got out of the box. 我还将
mousemove
和mouseup
事件移到了文档中,因为使用鼠标拖动时,它的移动速度可能比DOM快,并且开箱即用。
I also changed positions of inside divs to use 50%
so it will always be in the middle. 我还更改了内部div的位置以使用
50%
因此它将始终位于中间。 You may need to add a bit of margin to have it better centered. 您可能需要添加一些边距以使其更好地居中。 (See north vs south - I added
margin-left
to one of them) (请参阅北与南-我在其中一个中添加了
margin-left
)
This works fine for me. 这对我来说很好。
http://jsfiddle.net/v8qoLj76/4/ 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;
});
Is it something that you need (see the snippet below)? 是否需要(请参见下面的代码段)?
$(function() { var ORIGINAL_TOP = 100, ORIGINAL_LEFT = 100, ORIGINAL_WIDTH = 100, ORIGINAL_HEIGHT = 100, OFFSET = 5; $('.top').css({top: (ORIGINAL_TOP - OFFSET) + 'px'}); $('.left').css({left: (ORIGINAL_LEFT - OFFSET) + 'px'}); $('.bottom').css({top: (ORIGINAL_TOP + ORIGINAL_HEIGHT - OFFSET) + 'px'}); $('.right').css({left: (ORIGINAL_LEFT + ORIGINAL_WIDTH - OFFSET) + 'px'}); $('.control-element').css({height: (2 * OFFSET) + 'px', width: (2 * OFFSET) + 'px'}); var moveMiddleControls = function(top, left, width, height) { ['top', 'bottom'].forEach(function(coordinate) { $('#' + coordinate).css({left: (left + width / 2 - OFFSET) + 'px'}); }); ['left', 'right'].forEach(function(coordinate) { $('#' + coordinate).css({top: (top + height / 2 - OFFSET) + 'px'}); }); }; var resizeBox = function(top, left, width, height) { $('#box').css({ top: top + 'px', left: left + 'px', width: width + 'px', height: height + 'px' }); }; var updateStatus = function(top, left, width, height) { $('#status-top').html(Math.round(top)); $('#status-left').html(Math.round(left)); $('#status-width').html(Math.round(width)); $('#status-height').html(Math.round(height)); }; var updatePosition = function(top, left, width, height) { resizeBox(top, left, width, height); moveMiddleControls(top, left, width, height); updateStatus(top, left, width, height); }; var update = function() { updatePosition( $('#top').position().top + OFFSET, $('#left').position().left + OFFSET, $('#right').position().left - $('#left').position().left, $('#bottom').position().top - $('#top').position().top ); }; update(); var activeElement; $('.control-element').mousedown(function(e) { activeElement = this; e.preventDefault(); return false; }); $(document).mousemove(function(e) { if(activeElement !== undefined) { ['top', 'bottom'].forEach(function(className) { if($(activeElement).hasClass(className)) { $('.' + className).css({top: e.pageY + 'px'}); } }); ['left', 'right'].forEach(function(className) { if($(activeElement).hasClass(className)) { $('.' + className).css({left: e.pageX + 'px'}); } }); update(); } }); $(document).mouseup(function() { activeElement = undefined; }); });
#box { border:1px solid #000; background-color:red; position: fixed; } .control-element { background-color: #000; position: fixed; } #top-left { cursor: nw-resize; } #top { cursor:n-resize; } #top-right { cursor:ne-resize; } #left { cursor:w-resize; } #right { cursor:e-resize; } #bottom-left { cursor:sw-resize; } #bottom { cursor:s-resize; } #bottom-right { cursor: se-resize; } .status { position:fixed; right: 5px; bottom: 10px; width: 80px; height: 80px; z-index: 999; font-size:8px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="box"></div> <div id="top-left" class="control-element top left"></div> <div id="top" class="control-element top"></div> <div id="top-right" class="control-element top right"></div> <div id="right" class="control-element right"></div> <div id="bottom-right" class="control-element bottom right"></div> <div id="bottom" class="control-element bottom"></div> <div id="bottom-left" class="control-element bottom left"></div> <div id="left" class="control-element left"></div> <div class="status"> <div>top: <span id="status-top"></span>px</div> <div>left: <span id="status-left"></span>px</div> <div>width: <span id="status-width"></span>px</div> <div>height: <span id="status-height"></span>px</div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.