Here's the issue I'm facing with my page.
The problem arises when using draggabilly to move the line. Dragging it to the left works fine, but dragging it to the right doesn't function properly in the area where the tinymce compiler is located. How can this problem be resolved?
https://i.sstatic.net/wo7Y8.gif
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.all-warp {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
}
.left {
width: 200px;
background-color: burlywood;
}
.move-line {
width: 4px;
background-color: crimson;
cursor:e-resize;
}
.editor-warp {
flex-grow: 2;
}
</style>
<body>
<div class="all-warp">
<div class="left"></div>
<div class="move-line"></div>
<div class="editor-warp">
<textarea id="editor"></textarea>
</div>
</div>
<script>
$(document).ready(function () {
var $draggable = $('.move-line').draggabilly({
axis: 'x',
containment: '.all-warp'
})
});
tinymce.init({
selector: '#editor',
menubar: false,
statusbar: false,
resize: false,
height:500,
});
</script>
</body>
</html>