Hi I am working on a CodePen to make a draggable and resizavle box without Jquery. What I am trying to accomplish is that when you hover/click over the main body of the div you can drag it around and will have the "move" cursor.
When you hover/click on the border, you can resize the box, based on which side you click on and have the "col-resize" or "row-resize" cursor.
What I am really wondering is if it is even possible to select the border with JS and CSS, and if so how.
This is an example of how to determine which border you're hovering (good luck with your other calculations):
var div = document.querySelector("#div");
var delta = 10; // the thickness of the hovered border area
div.onmousemove = function(e) {
var rect = div.getBoundingClientRect();
var x = e.clientX - rect.left, // the relative mouse postion to the element
y = e.clientY - rect.top, // ...
w = rect.right - rect.left, // width of the element
h = rect.bottom - rect.top; // height of the element
var c = ""; // which cursor to use
if(y < delta) c += "n"; // north
else if( y > h - delta) c += "s"; // south
if(x < delta) c += "w"; // west
else if(x > w - delta) c += "e"; // east
if(c) // if we are hovering at the border area (c is not empty)
div.style.cursor = c + "-resize"; // set the according cursor
else // otherwise
div.style.cursor = "pointer"; // set to pointer
}#div {
background-color: red;
width: 100px;
height: 100px;
}<div id="div"></div>
<br>Psst! Hover at the border area! Corners too.Note: The above method doesn't relly on wether or not the element has borders, and wether or not it could have child nodes (for example img...).
I don't think that you can detect a click just on the border without any workaround. You could detect the border by checking where the mouse is in relation to box, as @ibrahim mahrir did, but I prefer just using a wrapper element it:
Undynamic to CSS values
The most simple. Set the width of the "border" manually. Use if you're never going to change the padding/width of the "border".
var border = document.getElementById("border");
var bor = 4;
border.onclick = function(e) {
if (e.target !== e.currentTarget) return;
console.log("border-clicked")
}
border.onmouseover = function(e) {
y = e.offsetY;
if (y <= bor || y >= this.offsetHeight - bor) c = "row"
else c = "col"
this.style.cursor = c + "-resize";
}#border {
padding: 4px;
background: blue;
box-sizing: border-box;
}
.box{
height: 100px;
width: 100%;
background: white;
cursor: default;
}<div id="border">
<div class="box"></div>
</div>Dynamic to one CSS value
Set the width of the "border" by selecting one of the values of the padding. Use this if are going to change the value of the padding and has the same width throughout.
var border = document.getElementById("border");
var bor = parseInt(window.getComputedStyle(border, null).getPropertyValue('padding-left') )
border.onclick = function(e) {
if (e.target !== e.currentTarget) return;
console.log("border-clicked")
}
border.onmouseover = function(e) {
y = e.offsetY;
if (y <= bor || y >= this.offsetHeight - bor) c = "row"
else c = "col"
this.style.cursor = c + "-resize";
}#border {
padding: 4px;
background: blue;
box-sizing: border-box;
}
.box{
height: 100px;
width: 100%;
background: white;
cursor: default;
}<div id="border">
<div class="box"></div>
</div>Dynamic to both CSS values
Set the width of the "border" by selecting a horizontal and vertical value of the padding. Use this if the padding is like padding: #px #px.
var border = document.getElementById("border");
var borderStyles = window.getComputedStyle(border, null);
var borLeft = parseInt( borderStyles.getPropertyValue('padding-left') )
var borTop = parseInt( borderStyles.getPropertyValue('padding-top') )
border.onclick = function(e) {
if (e.target !== e.currentTarget) return;
console.log("border-clicked")
}
border.onmouseover = function(e) {
x = e.offsetX;
y = e.offsetY;
if (x < borLeft || x > this.offsetWidth - borLeft ) c = "col";
else if (y <= borTop || y >= this.offsetHeight - borTop) c = "row"
this.style.cursor = c + "-resize";
}#border {
padding: 4px;
background: blue;
box-sizing: border-box;
}
.box{
height: 100px;
width: 100%;
background: white;
cursor: default;
}<div id="border">
<div class="box"></div>
</div>
Create a div and make it is position absolute inside your hole div add the style of you border to it then give a hover effect and the event you want to it. Set the position relative to the hole div and absolute to the border div you have to set left, right,top,bottom to minus value according to your border width you may need to make the background-color as transparent.
