We Keep Coding

document.addEventListener blocking highlight in textarea

I did a div that is moveable but unfortunetaly the function that let user move the div also block the highlight of the text in the text area behind.
I would like to keep the possibility to move the div and to highlight the text in textarea like I want.
Ps: I already tried to put the addEventListener on varMoveButtonNotesWindow but it's really ncomfortable to use it like that (we need to keep the cursor in the little box, and I dont want the box to be bigger it wouldn't look good).
Here's the code:
var mousePosition;
var offset = [0,0];
var isDown = false;
var varMoveButtonNotesWindow = document.getElementById('moveButtonNotesWindow');
var varNotesWindow = document.getElementById('notesWindow');
varMoveButtonNotesWindow.addEventListener('mousedown', function(e) {
isDown = true;
offset = [
varNotesWindow.offsetLeft - e.clientX,
varNotesWindow.offsetTop - e.clientY
];
}, true);
document.addEventListener('mouseup', function() {
isDown = false;
}, true);
//The bug occurs here
document.addEventListener('mousemove', function(event) {
event.preventDefault();
if (isDown) {
mousePosition = {
x : event.clientX,
y : event.clientY
};
varNotesWindow.style.left = (mousePosition.x + offset[0]) + 'px';
varNotesWindow.style.top = (mousePosition.y + offset[1]) + 'px';
}
}, true);
//so far
function closeNotesWindow() {
varNotesWindow.classList.remove('show');
}
function openNotesWindow() {
windowsModalContainer.classList.remove('show');
varNotesWindow.classList.add('show');
};
.firstTextarea {
height: 300px;
width: 300px;
}
#notesWindow {
display: block;
position: absolute;
width: 300px;
height: 275px;
top: 0px;
left: 0px;
border: 2px solid #313131;
z-index: 2;
resize: both;
overflow: auto;
}
#headerNotesWindow {
height: 35px;
background-color: black;
}
#moveButtonNotesWindow {
position: absolute;
background-color: blue;
color: white;
width: 20px;
height: 20px;
right: 5px;
z-index: 1;
top: 7.5px;
}
#closeButtonNotesWindow {
position: absolute;
background-color: red;
color: white;
width: 20px;
height: 20px;
right: 30px;
z-index: 1;
top: 7.5px;
}
#divTextareaNotesWindow {
text-align: center;
height: calc(100% - 6px - 35px);
}
#textareaNotesWindow {
resize: none;
width: calc(100% - 6px);
height: 100%;
outline: none;
}
<textarea class="firstTextarea">Pokemon is the best game of my childhood.</textarea>
<div class="divWindow" id="notesWindow">
<div id="headerNotesWindow">
<div id="moveButtonNotesWindow"></div>
<div id="closeButtonNotesWindow" onclick="closeNotesWindow()"></div>
</div>
<div id="divTextareaNotesWindow">
<textarea id="textareaNotesWindow"></textarea>
</div>
</div>

This can do like but not perfact：
RollBack selection when focus back it.
var mousePosition;
var offset = [0,0];
var isDown = false;
var varMoveButtonNotesWindow = document.getElementById('moveButtonNotesWindow');
var varNotesWindow = document.getElementById('notesWindow');
varMoveButtonNotesWindow.addEventListener('mousedown', function(e) {
isDown = true;
offset = [
varNotesWindow.offsetLeft - e.clientX,
varNotesWindow.offsetTop - e.clientY
];
}, true);
document.addEventListener('mouseup', function() {
isDown = false;
}, true);
//The bug occurs here
document.addEventListener('mousemove', function(event) {
event.preventDefault();
if (isDown) {
mousePosition = {
x : event.clientX,
y : event.clientY
};
varNotesWindow.style.left = (mousePosition.x + offset[0]) + 'px';
varNotesWindow.style.top = (mousePosition.y + offset[1]) + 'px';
}
}, true);
//so far
window.addEventListener('load',function(){
var logTextSelection = function(event) {
var tgItem = event.target;
tgItem.setAttribute("lastSelectionStart",tgItem.selectionStart);
tgItem.setAttribute("lastSelectionEnd",tgItem.selectionEnd);
}
var rollBackSelection = function(event){
var tgItem = event.target;
var lastSelectionStart = tgItem.getAttribute("lastSelectionStart");
var lastSelectionEnd = tgItem.getAttribute("lastSelectionEnd");
if((lastSelectionStart !== lastSelectionEnd)){
tgItem.focus();
tgItem.setSelectionRange(lastSelectionStart,lastSelectionEnd);
}
}
var docTextareas = document.getElementsByTagName('textarea');
for (var i = 0; i < docTextareas.length; i++) {
docTextareas[i].addEventListener('select', logTextSelection, true);
docTextareas[i].addEventListener('keyup', logTextSelection, true);
docTextareas[i].addEventListener('focus', rollBackSelection, true);
}
});
function closeNotesWindow() {
varNotesWindow.classList.remove('show');
}
function openNotesWindow() {
windowsModalContainer.classList.remove('show');
varNotesWindow.classList.add('show');
};
.firstTextarea {
height: 300px;
width: 300px;
}
#notesWindow {
display: block;
position: absolute;
width: 300px;
height: 275px;
top: 0px;
left: 0px;
border: 2px solid #313131;
z-index: 2;
resize: both;
overflow: auto;
}
#headerNotesWindow {
height: 35px;
background-color: black;
}
#moveButtonNotesWindow {
position: absolute;
background-color: blue;
color: white;
width: 20px;
height: 20px;
right: 5px;
z-index: 1;
top: 7.5px;
}
#closeButtonNotesWindow {
position: absolute;
background-color: red;
color: white;
width: 20px;
height: 20px;
right: 30px;
z-index: 1;
top: 7.5px;
}
#divTextareaNotesWindow {
text-align: center;
height: calc(100% - 6px - 35px);
}
#textareaNotesWindow {
resize: none;
width: calc(100% - 6px);
height: 100%;
outline: none;
}
<textarea class="firstTextarea">Pokemon is the best game of my childhood.</textarea>
<div class="divWindow" id="notesWindow">
<div id="headerNotesWindow">
<div id="moveButtonNotesWindow"></div>
<div id="closeButtonNotesWindow" onclick="closeNotesWindow()"></div>
</div>
<div id="divTextareaNotesWindow">
<textarea id="textareaNotesWindow"></textarea>
</div>
</div>

OK I found it, i just created a div that replace document for the addeventListener.
Ps I set the color to rgba(0, 175, 0, 0.3) just for you to see how it react and work you can obviously change it to 0.
function start() {
varNotesWindow.classList.add('show');
}
var mousePosition;
var offset = [0,0];
var isDown = false;
var varMoveButtonNotesWindow = document.getElementById('moveButtonNotesWindow');
var varNotesWindow = document.getElementById('notesWindow');
const constAlternativeDocumentForMoveButtonsWindow = document.getElementById('alternativeDocumentForMoveButtonsWindowId');
//Start Move Notes Window
varMoveButtonNotesWindow.addEventListener('mousedown', function(e) {
isDown = true;
offset = [
varNotesWindow.offsetLeft - e.clientX,
varNotesWindow.offsetTop - e.clientY
];
constAlternativeDocumentForMoveButtonsWindow.classList.add('use');
}, true);
constAlternativeDocumentForMoveButtonsWindow.addEventListener('mousemove', function(event) {
event.preventDefault();
if (isDown) {
mousePosition = {
x : event.clientX,
y : event.clientY
};
varNotesWindow.style.left = (mousePosition.x + offset[0]) + 'px';
varNotesWindow.style.top = (mousePosition.y + offset[1]) + 'px';
}
}, true);
constAlternativeDocumentForMoveButtonsWindow.addEventListener('mouseup', function() {
constAlternativeDocumentForMoveButtonsWindow.classList.remove('use');
});
document.addEventListener('mouseup', function() {
isDown = false;
}, true);
//End Move Notes Window
function closeNotesWindow() {
varNotesWindow.classList.remove('show');
}
function openNotesWindow() {
windowsModalContainer.classList.remove('show');
varNotesWindow.classList.add('show');
};
.alternativeDocumentForMoveButtonsWindowClass {
display: none;
}
.alternativeDocumentForMoveButtonsWindowClass.use {
display: block;
position: absolute;
z-index: 3;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0, 175, 0, 0.3);
}
#notesWindow {
display: none;
}
#notesWindow.show {
display: block;
position: absolute;
width: 300px;
height: 275px;
top: 0px;
left: 0px;
border: 2px solid #313131;
z-index: 2;
resize: both;
overflow: auto;
}
#headerNotesWindow {
height: 35px;
background-color: black;
}
#moveButtonNotesWindow {
position: absolute;
background-color: blue;
color: white;
width: 20px;
height: 20px;
right: 5px;
z-index: 1;
top: 7.5px;
}
#closeButtonNotesWindow {
position: absolute;
background-color: red;
color: white;
width: 20px;
height: 20px;
right: 30px;
z-index: 1;
top: 7.5px;
}
#divTextareaNotesWindow {
text-align: center;
height: calc(100% - 6px - 35px);
}
#textareaNotesWindow {
resize: none;
width: calc(100% - 6px);
height: 100%;
outline: none;
}
<button onclick='start()'>Let's Go</div>
<div class="alternativeDocumentForMoveButtonsWindowClass" id="alternativeDocumentForMoveButtonsWindowId"></div>
<div class="divWindow" id="notesWindow">
<div id="headerNotesWindow">
<div id="moveButtonNotesWindow"></div>
<div id="closeButtonNotesWindow" onclick="closeNotesWindow()"></div>
</div>
<div id="divTextareaNotesWindow">
<textarea id="textareaNotesWindow"></textarea>
</div>
</div>

Collision detection in nuxt.js. code is running without errors. But some functionalities not working

I am working with collision detection in vue.js using nuxt.js framework. I have done a similar program from this source
https://codepen.io/dropinks/pen/MrzPXB
I have converted this js code in vue friendly template and script. Only problem is that the the collision is not being detected . Please take a look at my code and tell where i made mistake.
Here is the link for codesandbox online editor where i have the code
https://codesandbox.io/s/wispy-hill-466s7?file=/pages/index.vue
template code:
<template>
<div class="container">
<div class="rectangle-1" id="rect">Hover Me</div>
<div class="rectangle-2" id="dragMe">Drag Me</div>
</div>
</template>
styles:
<style scoped>
container {
position: relative;
}
.rectangle-1 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #4CAF50;
width: 180px;
height: 150px;
border-radius: 5px;
transition: 0.3s all ease;
color: #fff;
text-align: center;
line-height: 150px;
font-size: 25px;
}
.rectangle-1.collide {
background: #EF5350;
}
.rectangle-1:after {
content: ":-)";
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
}
.rectangle-1.collide:after {
content: ":-(";
}
.rectangle-2 {
position: absolute;
background: #F5B041;
width: 100px;
height: 100px;
border-radius: 5px;
z-index: 10;
cursor: move;
transition: 0.5s box-shadow ease, 0.5s transform ease;
transform: translate(0, 0);
top: 40%;
left: 30%;
text-align: center;
line-height: 100px;
font-size: 17px;
}
.rectangle-2.onDrag {
box-shadow: 5px 5px 25px 0px rgba(0, 0, 0, 0.2);
transform: translate(-3px, -3px);
}
</style>
script
<script>
export default {
data() {
return {
dragMe: "",
rect: "",
};
},
created: function () {
if (process.client) {
this.myFunction();
}
},
methods: {
myFunction: function () {
this.rect = document.getElementById("rect");
this.dragMe = document.getElementById("dragMe");
this.initDrag({
element: this.dragMe,
drag: function () {
this.isCollapsed(this.dragMe, this.rect);
},
});
},
isCollapsed: function (dragMe, rect) {
var object_1 = this.dragMe.getBoundingClientRect();
var object_2 = this.rect.getBoundingClientRect();
if (
object_1.left < object_2.left + object_2.width &&
object_1.left + object_1.width > object_2.left &&
object_1.top < object_2.top + object_2.height &&
object_1.top + object_1.height > object_2.top
) {
rect.classList.add("collide");
document.getElementById('dragMe').style.background = 'blue';
} else {
rect.classList.remove("collide");
}
},
initDrag: function (options) {
var element = options.element;
var mousedown,
mouseup,
mousemove,
dragStart,
initX,
initY,
offsetLeft,
offsetTop;
function mouseMove(ev) {
if (dragStart) {
var newX = offsetLeft + (ev.pageX - initX);
var newY = offsetTop + (ev.pageY - initY);
element.style.top = newY + "px";
element.style.left = newX + "px";
options.drag.call();
}
}
function mouseUp(ev) {
dragStart = false;
document.removeEventListener("mousemove", mouseMove, false);
document.removeEventListener("mouseup", mouseUp, false);
options.stop.call();
}
function mouseDown(ev) {
initX = ev.pageX;
initY = ev.pageY;
dragStart = true;
offsetLeft = element.offsetLeft;
offsetTop = element.offsetTop;
document.addEventListener(
"mousemove",
function (ev) {
mouseMove(ev);
},
false
);
document.addEventListener(
"mouseup",
function (ev) {
mouseUp(ev);
},
false
);
options.start.call();
}
element.addEventListener(
"mousedown",
function (ev) {
mouseDown(ev);
},
false
);
},
},
};
</script>

How can I avoid the automatic left alignment in rotation?

I am trying to move and rotate the object in the direction of the mouse click. Unfortunately during the first click object automatically align itself to left. It works perfectly after the first click but it doesn't work during the first click. I couldn't find out why it goes automatically to upper left corner. How can I fix that? Here is the code:
var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
var triangle = document.querySelector("#triangle");
container.addEventListener("click", getClickPosition, false);
function getClickPosition(e) {
var xPosition = e.clientX;
var yPosition = e.clientY;
var translate3dValue = "translate3d(" + xPosition + "px," + yPosition + "px,0)";
var box = $("#thing");
var boxCenter = [box.offset().left + box.width() / 2, box.offset().top + box.height() / 2];
var angle = Math.atan2(xPosition - boxCenter[0], -(yPosition - boxCenter[1])) * (180 / Math.PI);
theThing.style.transform += "rotate(" + angle + "deg)";
setTimeout(function() {
theThing.style.transform = translate3dValue;
}, 500);
}
body {
background-color: #FFF;
padding: 0;
margin: 0;
}
#contentContainer {
width: 550px;
height: 350px;
border: 15px #EDEDED;
overflow: hidden;
background-color: #F2F2F2;
cursor: pointer;
}
#thing {
width: 75px;
height: 75px;
background-color: rgb(255, 207, 0);
border-radius: 0%;
transform: translate3d(200px, 100px, 0);
transition: transform.2s ease-in;
}
#triangle {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 45px solid transparent;
border-bottom: 75px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="contentContainer">
<div id="thing">
<div id="triangle">
</div>
</div>
</div>

Because initially the transform is set in the CSS thus you cannot append the rotation to it and you will simply override it. Make it inline using JS and it will work fine. It will behave like the next ones since later you will be adding all the transform inline:
var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
var triangle = document.querySelector("#triangle");
container.addEventListener("click", getClickPosition, false);
theThing.style.transform="translate3d(200px, 100px, 0)";
function getClickPosition(e) {
var xPosition = e.clientX;
var yPosition = e.clientY;
var translate3dValue = "translate3d(" + xPosition + "px," + yPosition + "px,0)";
var box = $("#thing");
var boxCenter = [box.offset().left + box.width() / 2, box.offset().top + box.height() / 2];
var angle = Math.atan2(xPosition - boxCenter[0], -(yPosition - boxCenter[1])) * (180 / Math.PI);
theThing.style.transform += "rotate(" + angle + "deg)";
setTimeout(function() {
theThing.style.transform = translate3dValue;
}, 500);
}
body {
background-color: #FFF;
padding: 0;
margin: 0;
}
#contentContainer {
width: 550px;
height: 350px;
border: 15px #EDEDED;
overflow: hidden;
background-color: #F2F2F2;
cursor: pointer;
}
#thing {
width: 75px;
height: 75px;
background-color: rgb(255, 207, 0);
border-radius: 0%;
/*transform: translate3d(200px, 100px, 0);*/
transition: transform.2s ease-in;
}
#triangle {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 45px solid transparent;
border-bottom: 75px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="contentContainer">
<div id="thing">
<div id="triangle">
</div>
</div>
</div>

How to solve two javascript pop-ups conflict?

I built a simple pop-up that can open inline content and it is based on add and remove class. I want to use this pop-up two times on the same page, one as classic onclick pop-up and second should be triggered by mousemove (top of the page).
To done this I changed pop-up IDs, but I cannot get through one conflict: When mouse move pop-up is opened it cant be closed.
// Pop-up
if (document.querySelector(".fl-pop-up")) {
window.addEventListener("load", function() {
var btn = document.getElementById("btn_fl-pop-up");
var modal = document.getElementById("fl-pop-up__init");
// Open if exist
if (btn) {
btn.onclick = function() {
modal.classList.add("fl-pop-up__active");
};
}
var modal__overlay = document.querySelector(".fl-pop-up__overlay");
var close = document.querySelector(".fl-pop-up__overlay--close");
// Close on close click
close.onclick = function() {
modal__overlay.classList.remove("fl-pop-up__active");
};
// Close on window click
window.onclick = function(event) {
if (event.target == modal__overlay) {
modal__overlay.classList.remove("fl-pop-up__active");
}
};
// Close on ESC
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 27) {
modal__overlay.classList.remove("fl-pop-up__active");
}
};
});
}
// Abandoning visitor
var mouseX = 0;
var mouseY = 0;
var popupCounter = 0;
document.addEventListener("mousemove", function(e) {
mouseX = e.clientX;
mouseY = e.clientY;
// document.getElementById("coordinates").innerHTML = "<br />X: " + e.clientX + "px<br />Y: " + e.clientY + "px";
//});
//jQuery(document).mouseleave(function () {
var modal = document.getElementById("fl-pop-up__ab");
//var modal = document.querySelector(".fl-ab-pop-up");
if (mouseY < 50) {
if (popupCounter < 1) {
modal.classList.add("fl-pop-up__active");
}
popupCounter++;
}
});
.more-link {
position: absolute;
top: 50%;
left: 45%;
}
/* FL POP UP */
.fl-pop-up {
position: relative;
z-index: 1000000;
}
.fl-pop-up__overlay {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s 0s, visibility 0s 0.3s;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(23, 23, 23, 0.85);
height: 100vh;
}
.fl-pop-up__active {
opacity: 1;
visibility: visible;
transition: opacity 0.3s 0s, visibility 0s 0s;
}
.fl-pop-up__overlay--pop-up {
/*padding: 20px;*/
background: #fff;
width: 79%;
height: 70vh;
overflow: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-box-shadow: 0 0 12px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
box-shadow: 0 0 12px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.fl-pop-up__overlay--close {
position: absolute;
cursor: pointer;
top: 0;
right: 0;
overflow: hidden;
font-size: 34px;
line-height: 1.1;
text-align: center;
z-index: 1050;
color: rgb(210, 210, 210);
background-color: rgb(22, 22, 23);
width: 40px;
height: 40px;
padding: 10px;
display: block;
background-position: 10px center;
}
.fl-pop-up__overlay--close:hover {
color: #fff;
}
<div id="btn_fl-pop-up" class="btn_fl-pop-up more-link">Open POP UP 1 - onclick</div>
<!--Onclick - POP UP 1-->
<div class="fl-pop-up">
<div id="fl-pop-up__init" class="fl-pop-up__overlay">
<div class="fl-pop-up__overlay--pop-up">
<div class="fl-pop-up__overlay--close">×</div>
<div style="margin: 0 0 0 -15px;">
<div class="col-xs-12" style="text-align: center; the padding-top:3em;">
<h1 style="font-size: 2.2rem;">POP UP 1 (click)</h1>
</div>
</div>
</div>
</div>
</div>
<!--Mousemove - POP UP 2-->
<div class="fl-pop-up">
<div id="fl-pop-up__ab" class="fl-pop-up__overlay">
<div class="fl-pop-up__overlay--pop-up">
<div class="fl-pop-up__overlay--close">×</div>
<div style="margin: 0 0 0 -15px;">
<div class="col-xs-12" style="text-align: center; padding-top:3em;">
<h1 style="font-size: 2.2rem;">POP UP 2 (mousemove)</h1>
</div>
</div>
</div>
</div>
</div>
Thank you

Make a splitter very thin and grab it

I want to make a draggle splitter between 2 panels. The following is a working version.
Now, I want to make the width of handle as thin as possible (less than 0.1px?), so there is no way to make the width (appear) smaller than 1px?
Additionally, when the splitter is thin, it is hard to select by the mouse. Is there a way to make a splitter easy to grab?
Taking JSBin as example, how did they manage to realise the splitters among the panels?
(function($) {
$.fn.drags = function(opt) {
opt = $.extend({
handle: "",
cursor: "ew-resize",
min: 10
}, opt);
if (opt.handle === "") {
var $el = this;
} else {
var $el = this.find(opt.handle);
}
var priorCursor = $('body').css('cursor');
return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
priorCursor = $('body').css('cursor');
$('body').css('cursor', opt.cursor);
if (opt.handle === "") {
var $drag = $(this).addClass('draggable');
} else {
var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
}
var z_idx = $drag.css('z-index'),
drg_h = $drag.outerHeight(),
drg_w = $drag.outerWidth(),
pos_y = $drag.offset().top + drg_h - e.pageY,
pos_x = $drag.offset().left + drg_w - e.pageX;
var mouseMove = function(e) {
var prev = $('.draggable').prev();
var next = $('.draggable').next();
var total = prev.outerWidth() + next.outerWidth();
var totalPercentage = parseFloat(prev.css('flex')) + parseFloat(next.css('flex'));
var offset = prev.offset();
if(offset){
var leftPercentage = ((e.pageX - offset.left - drg_w / 2) / total) * totalPercentage;
var rightPercentage = totalPercentage - leftPercentage;
if (leftPercentage * 100 < opt.min || rightPercentage * 100 < opt.min) {
return;
}
prev.css('flex', leftPercentage.toString());
next.css('flex', rightPercentage.toString());
}
}
$drag.css('z-index', 1000).parent().on("mousemove", mouseMove).on("mouseup", function() {
$(this).off("mousemove", mouseMove).off("mouseup");
$('body').css('cursor', priorCursor);
$('.draggable').removeClass('draggable').css('z-index', z_idx);
});
e.preventDefault(); // disable selection
});
}
})(jQuery);
$('.handle').drags();
.flex-box {
display: flex;
width: 100%;
margin: 0;
height: 300px;
}
.flex-box .col {
border: 1px solid grey;
flex: 0.33;
padding: 12px;
overflow-y: auto;
overflow-x: hide;
}
.handle {
width: 1px;
text-align: center;
background: grey;
transition: all ease-in 0.1s;
}
.draggable {
background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex-box">
<div class="col">
<p>Pellentesque ...</p>
</div>
<div class="handle"></div>
<div class="col">
<p>Pellentesque ...</p>
</div>
</div>

If you'd like the handle to appear thinner try applying a negative value to the right "col" e.g. margin-left: -2px; so it overlaps the left "col" border on the left of it. I don't think you can make the width "appear" as 0.1px. Firefox is the only browser that renders such value. (https://css-tricks.com/forums/topic/0-1px-borders/)
.flex-box .col:last-child {
margin-left: -2px;
}
//raise handle layer to top
.handle {
.....
z-index: 9999;
}
Hope this helps...
*Edit:
This is the closest I could get to your request:
.flex-box {
display: flex;
width: 100%;
margin: 0;
height: 300px;
}
.flex-box .col {
border: 1px solid grey;
flex: 0.33;
padding: 12px;
overflow-y: auto;
overflow-x: hide;
}
.flex-box .col:last-child {
margin-left: -6px;
}
.handle {
width: 5px;
text-align: center;
transition: all ease-in 0.1s;
z-index: 999;
overflow: visible;
}
.handle-inner{
width: 5px;
height: 100%;
position: relative;
margin-left: -10px;
}
.draggable {
background: grey;
}
Jsbin :
https://jsbin.com/nupefekuhu/edit?html,css,js,output