Develop a unique splitter code that utilizes pure javascript and css, allowing users to drag and drop with precision

I am facing an issue with setting the cursor above my drop panel, as it results in a flicker effect. How can I set the cursor for my example to work properly?

I have tried multiple different approaches to make this work.

Although I am using the provided code, I want to enhance the visual aspect of the drag and drop functionality.

I experimented with other events to achieve the desired cursor effect during drag and drop, but none of them seem to work as intended. I had to change the positioning function from the ondragenter event to ondragover event to make it work because the former was not functioning correctly.

//---------------------------------------------------------------------------------------------------------

... (remaining JavaScript code remains the same) ...

body
{
    background-color: #000000;
}
div.main
{
    background-color: #000000; 
    position: absolute; top: 10px; left: 10px; right: 0px; bottom: 10px; 
}

... (remaining CSS code remains the same) ...

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body onload="Body_OnLoad()" onresize="Body_OnResize()">
    <form id="form1" runat="server">
        <div id="divMain" class="main">
            <div class="top">

            </div>
            <div id="divLeft" class="left" ondragover="handleDragOver(event, this)" ondrop="handleDrop(event, this)" >

            </div>
            <div id="divSplitterV" class="splitter_vertical" draggable="true" ondragstart="handleDragStart(event, this)" ondragend="handleDragEnd(event, this)">

            </div>
            <div id="divRight" class="right" ondragover="handleDragOver(event, this)" ondrop="handleDrop(event, this)">

            </div>
            <div class="bottom">

            </div>
        </div>
    </form>
</body>
</html>

Answer №1

Add a pseudo-element to the div.splitter_vertical element that allows for easy grabbing without altering its appearance.

For instance, to enable grabbing the splitter with a range of 10px to the left and 10px to the right:

div.splitter_vertical:before {
  content: '';
  position: absolute;
  height: 100%;
  left: -10px;
  width: 20px;
}

//---------------------------------------------------------------------------------------------------------

function handleDragStart(pEvent, pTarget)
{
    //Set properties
    pEvent.dataTransfer.effectAllowed = 'move';
    pEvent.dataTransfer.setData("text", pTarget.id);
}

function handleDragOver(pEvent, pTarget)
{
    if (pEvent.preventDefault) { pEvent.preventDefault(); }

    pEvent.dataTransfer.dropEffect = 'move';

    //Get element references
    var ldivMain = document.getElementById('divMain');
    var ldivLeft = document.getElementById('divLeft');
    var ldivRight = document.getElementById('divRight');

    //Store position of divSplitterV
    var lPosX = pEvent.clientX;
    var lSize_Max = ldivMain.clientWidth -12;
    var lSize_New = lSize_Max - lPosX;

    //Adjust panel size

    ldivLeft.style.width = lPosX + 'px';
    ldivRight.style.width = lSize_New + 'px';

    return false;
}

function handleDragLeave(pEvent, pTarget)
{
    //Remove class from item
}

function handleDrop(pEvent, pTarget)
{
    //Prevent browser redirect
    if (pEvent.preventDefault) { pEvent.preventDefault(); }
    if (pEvent.stopPropagation) { pEvent.stopPropagation(); }

    //Return
    return false;
}

function handleDragEnd(pEvent, pTarget)
{
    var ldivLeft = document.getElementById('divLeft');

    pTarget.style.left = ldivLeft.clientWidth + 'px';
}

function SETSplitterPosition()
{
    var ldivLeft = document.getElementById('divLeft');
    var ldivSplitterV = document.getElementById('divSplitterV');

    ldivSplitterV.style.top = '60px';
    ldivSplitterV.style.bottom = '60px';
    ldivSplitterV.style.left = ldivLeft.clientWidth + 'px';
}

function SETLayoutSize()
{
    var ldivMain = document.getElementById('divMain');
    var ldivLeft = document.getElementById('divLeft');
    var ldivRight = document.getElementById('divRight');

    var lSize_Max = ldivMain.clientWidth -12;
    var lSize_Band = (lSize_Max / 2);

    ldivLeft.style.width = lSize_Band + 'px';
    ldivRight.style.width = lSize_Band + 'px';

    SETSplitterPosition();
}

function Body_OnLoad()
{
    SETLayoutSize();
}

function Body_OnResize()
{
    SETLayoutSize();
}
body
{
    background-color: #000000;
}
div.main
{
    background-color: #000000; 
    position: absolute; top: 10px; left: 10px; right: 0px; bottom: 10px; 
}
div.top
{
    background-color: #ffd700;
    position: absolute; top: 0px; left: 0px; right: 10px; height: 50px; 
}
div.left
{
    background-color: #424242;
    position: absolute; top: 60px; left: 0px; bottom: 60px; 

    border-right:solid 1px #ffd700;
}
div.right
{
    background-color: gray;
    position: absolute; top: 60px; right: 10px; bottom: 60px; 

    border-left:solid 1px red;
}
div.bottom
{
    position: absolute; left: 0px; right: 10px; bottom: 0px; height: 50px; background-color: greenyellow;
}

div.splitter_vertical
{
    background-color: #000000; cursor: e-resize;
    position: absolute; width: 2px; z-index: 5;
}

div.splitter_vertical:before {
  content: '';
  position: absolute;
  height: 100%;
  left: -10px;
  width: 20px;
}
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body onload="Body_OnLoad()" onresize="Body_OnResize()">
    <form id="form1" runat="server">
        <div id="divMain" class="main">
            <div class="top">

            </div>
            <div id="divLeft" class="left" ondragover="handleDragOver(event, this)" ondrop="handleDrop(event, this)" >

            </div>
            <div id="divSplitterV" class="splitter_vertical" draggable="true" ondragstart="handleDragStart(event, this)" ondragend="handleDragEnd(event, this)">

            </div>
            <div id="divRight" class="right" ondragover="handleDragOver(event, this)" ondrop="handleDrop(event, this)">

            </div>
            <div class="bottom">

            </div>
        </div>
    </form>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to retrieve responseText from AJAX call using XrayWrapper

I am utilizing the IUI framework and attempting to retrieve the results from an ajax call. When inspecting the call in Firebug, it shows an "XrayWrapper[Object XMLHttpRequest{}", but I am struggling to access the responseText from the object. Upon expand ...

The API request for /api/auth/callback/credentials was resolved successfully, but no response was sent back. This could potentially lead to delays

When attempting to log in with Talend API Tester, I encountered the following message in the terminal: API resolved without sending a response for /api/auth/callback/credentials, this may result in stalled requests. Additionally, here is the screenshot ...

Guide to making a JavaScript button that triggers an iframe to open upon user clicking the button

I'm currently enhancing the comment section for posts on my website. I am looking to implement a button in javascript that, when clicked, will open an iframe window displaying comments similar to how Facebook does on their post. If there are other lan ...

What is the best way to deactivate div elements once an overlay has been applied to them?

My goal is to place an overlay on my form to prevent users from accessing the content. Even though I have added an overlay, users can still interact with input fields. How can I prevent that? .overlay { background: rgba(0, 0, 0, .75); text-align: ce ...

Load the index file using any URL parameter in the Express.js Router's "catchall" feature

I have a simple setup for my project, including server.js file in the root directory with the following code: app.use('/', express.static(__dirname + '/public/')); In addition, there is a public folder containing index.html, styles, a ...

Guide to Generating Extern for a Constant Variable in Google Closure Compiler (Variable Cannot be Renamed due to Eval)

Currently, I am using Google Closure Compiler in "SIMPLE_OPTIMIZATIONS" mode for my JavaScript code. However, I encountered an issue when the obfuscation changed the variable name from "_u" to "a", resulting in an error that "_u" is not defined in the cons ...

The positioning of Material UI InputAdornment icons is located beyond the boundaries of the TextField input area

I am struggling to understand why my InputAdornment is not positioned correctly. There doesn't seem to be any style in my code that would affect the location of the icon within the TextField (such as padding or flex properties). Currently, the calen ...

Is the "Illegal invocation" error popping up when using the POST method in AJAX?

Is there a way to retrieve JSON data using the POST method in Ajax? I attempted to use the code below but encountered an error: TypeError: Illegal invocation By following the link above, I was able to access JSON-formatted data. However, please note th ...

What is causing the width discrepancy in my header section on mobile devices?

Help needed with website responsiveness issue! The site works fine on most screen sizes, but when it reaches around 414px in width, the intro section becomes too wide for the screen. Any ideas on what could be causing this problem? html: <nav id="m ...

Modifying the display toggle functions

How can I toggle between a button and an input type "file" when clicked? I am using jQuery to show and hide elements, but I need help changing back to the button when clicking somewhere else on the page. HTML: Upload<input type="button" id="upload" /& ...

What steps can be taken to enable CORS on an existing server that was created with createServer function?

The following code snippet is what I currently have: var gqlServer =require('./server.js') var server=gqlServer() var port = process.env.PORT||5000 server.listen({port:port}, ()=> console.log(` ...

Tips for maintaining a seamless look with image wrapping on a single line

I'm having an issue with my code – the image is appearing below the input box instead of beside it. Can anyone spot the mistake? <input type="text" name="test" /> <div style="float:left"><img src="test.jpg" /></div> ...

Pictures without a set width

Hey there! I'm working on a responsive website and facing an issue with image resizing. When I shrink the screen size, the images also shrink along with it. How can I set a fixed width for the images? I tried switching from rem to px but that didn&apo ...

An issue occurred with player.markers not being recognized as a function when trying to utilize videojs markers

I am trying to add markers to my videojs player timeline. I have successfully implemented this feature a few months ago in a different project, but now when I try to use it again, I am encountering errors in the console and unable to see the markers on the ...

Guide on exporting a submodule within a TypeScript package

My aspiration is to develop a Typescript library that emulates the structure of popular libraries like RxJS and Angular Material, which are divided into submodules. RxJS and Angular exhibit a way to import features using syntax like this: // RxJS import ...

Style your Checkbox Button with the Checkbox component from Element Plus

Currently, I am utilizing Vue 3 along with the Element Plus library. My goal is to modify the hover, active, and select colors of the Checkbox Button that I have implemented. Unfortunately, my attempts to do so have not been successful. I essentially copie ...

Achieving success by correctly reaching the window's edge during an event (onscroll)

This happens to be my 1st inquiry. Specifically, I have a navigation menu with a transparent background and I am attempting to alter the background once it reaches the top edge of the window. window.addEventListener("scroll", navSticky); function navSt ...

Image proxy in Node.js

I am currently working on creating a proxy for images using an input URL. Although my code is set up to copy the same headers and return them to the client, I have encountered issues where the response either continues loading indefinitely or shows an er ...

Seeking assistance in creating custom tabs for integration with a jQuery tabs plugin

Attempting to navigate the world of CSS as a newbie, I find myself struggling with creating tabs. Our current tab setup can be viewed here, but unfortunately, these tabs are created using an unattractive <table> tag. Below is the code responsible fo ...

How to effectively manage Mongoose Query Exceptions in Express.js

Let's imagine a scenario where I need to execute a Mongoose query in an Express post route: app.post("/login",(req,res)=>{ const username = req.body.username const password = req.body.password User.find({username:username},(er ...