Tips for allowing divs to be dragged and resized within table cells and rows

Question

Tips for allowing divs to be dragged and resized within table cells and rows

UPDATE

I believe that utilizing Jquery is the most appropriate solution for resolving my issue with the demo. Your assistance in making it work would be greatly appreciated. Thank you.

My goal is to develop a scheduler application.

https://i.sstatic.net/8sdQS.jpg

The essential functionality I require includes the ability to vertically resize colored divs and drag them into any row or cell within the table.

For instance, being able to drag and resize an orange div to a row below it.

https://i.sstatic.net/8dpXe.jpg

Alternatively, when resizing the green div, the yellow div should automatically move to the row beneath it.

https://i.sstatic.net/WhTtQ.jpg

Dragging the divs should be straightforward.

I have a functional sandbox DEMO

I came across a fiddle online that perfectly matches my requirements, but it relies on Jquery which I prefer not to use if possible. FIDDLE OF WHAT I AM LOOKING FOR


document.getElementById('drop').addEventListener("click", () => {
  sortItemsByTable();
});
    
document.getElementById('resize').addEventListener("mouseover", () => {
  adjustSizeAndPosition();
});

javascript jquery css reactjs jquery-ui

Answer 1

Answer №1

JavaScript Solution

Your statement:

I found a solution online in a JS Fiddle that fits my requirements, but it relies on jQuery which I'd rather avoid if possible.

To mimic the functionality of the aforementioned JS Fiddle, I used plain JavaScript and the HTML Drag and Drop API. Here is my adaptation.

Note: To resize boxes vertically instead of horizontally, change resize: horizontal; to resize: vertical;.

Check out the code snippet below.

document.addEventListener('DOMContentLoaded', (event) => {
  var dragSrcEl = null;
  
  function handleDragStart(e) {
    dragSrcEl = this;

    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', this.innerHTML);
  }

  // Additional functions omitted for brevity

});

table {
  height: 100px;
}

td {
  height: 68px;
  width: 150px;
  border: gray thin solid;
}

.resize {
// CSS properties here
}

td.drop {
// CSS properties here
}

<!DOCTYPE html>
<html lang='en'>

<head>
// Head content
</head>

<body>
  <div>
    <table cellspacing='3'>
      <tr>
        // Table rows and headers
      </tr>

      <tbody class='container'>
        <tr>
          // Table data with draggable elements
        </tr>

        <tr>
         // Additional table data rows
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

Answer 2

JavaScript Solution

Your statement:

I found a solution online in a JS Fiddle that fits my requirements, but it relies on jQuery which I'd rather avoid if possible.

To mimic the functionality of the aforementioned JS Fiddle, I used plain JavaScript and the HTML Drag and Drop API. Here is my adaptation.

Note: To resize boxes vertically instead of horizontally, change resize: horizontal; to resize: vertical;.

Check out the code snippet below.

document.addEventListener('DOMContentLoaded', (event) => {
  var dragSrcEl = null;
  
  function handleDragStart(e) {
    dragSrcEl = this;

    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', this.innerHTML);
  }

  // Additional functions omitted for brevity

});

table {
  height: 100px;
}

td {
  height: 68px;
  width: 150px;
  border: gray thin solid;
}

.resize {
// CSS properties here
}

td.drop {
// CSS properties here
}

<!DOCTYPE html>
<html lang='en'>

<head>
// Head content
</head>

<body>
  <div>
    <table cellspacing='3'>
      <tr>
        // Table rows and headers
      </tr>

      <tbody class='container'>
        <tr>
          // Table data with draggable elements
        </tr>

        <tr>
         // Additional table data rows
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

Answer 3

Answer №2

Check out this awesome jQuery demonstration here. It's a sleek and sophisticated approach.

Enhancing HTML DOM elements with Draggable and Resizable Features using jQuery

Answer 4

Check out this awesome jQuery demonstration here. It's a sleek and sophisticated approach.

Enhancing HTML DOM elements with Draggable and Resizable Features using jQuery

Tips for allowing divs to be dragged and resized within table cells and rows

Answer №1

JavaScript Solution

Answer №2

Similar questions

ensure that angular's ng-if directive sets aside space to display content when triggered by an event

JavaScript - Loading image from local file on Linux machine

What could be causing the "No valid versions available for undefined" error to pop up during the installation of create-react-app?

Finding a jQuery DOM element without using a loop

creating an animated loop within an Angular template

The function cannot be called on a type that does not have a callable signature. The specified type, 'number | Dispatch<SetStateAction<number>>', does not have any compatible call signatures

Refresh in AJAX, automated loading for seamless transition to a different page

Obtain the content from a dynamically generated dropdown menu and incorporate it into a separate file

What is the proper way to bind CoreUI's CSwitch component?

Having trouble applying global styles in _app.js in NextJS?

The base64 code generated by the toDataURL method on the canvas appears to be incorrect

What is the best way to call an Angular component function from a global function, ensuring compatibility with IE11?

The data-toggle function is not functioning properly with the code provided

Tips for incorporating external libraries into a Grafana data source plugin

Creating a div caption that mimics a form label, but with the background div border removed, can be achieved

Having trouble sending messages on the server?

Issue encountered when assigning a new value to a private class property at a global scope in JavaScript

A method for retrieving the variables from the initial API function for use in a subsequent API function

jQuery DatePicker Not Displaying Calendar

Running on Node.js, the Promise is activated, yet there remains an issue with the function