How to make Group using Drag Drop using Javascript

John Brew 0
Viewed 25

I am working on a small project and that project include a functionality like below:

Drag Drop then Make Group

I have searched many articles but did not find which satisfy my requirement. All of theme are able to make drag and drop feature but none of them can make group like above example.

You are free to choose Javascript or Jquery or React for this.

drag-and-drop jquery reactjs javascript html
1 Answers

I tried this now, you can add more style to it through ID's in CSS file.

<!DOCTYPE html>
<html>
<body>
<div class="example-parent">
  <h1>Re-arrangeable List</h1>
  <i><p>Change the order as you like by dragging</p></i>
  <div class="example-origin">
   <h3> <strong>LIST :-</strong></h3>
    <div
      id="draggable-1"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);">
      Item 1</div>
    <div
      id="draggable-2"
      class="example-draggable"
      draggable="true">
      Item 2</div>
    <div
      id="draggable-3"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);">
      Item 3</div>
    <div
      id="draggable-4"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);">
      Item 4</div>
  </div>

  <div
    class="example-dropzone"
    ondragover="onDragOver(event);"
    ondrop="onDrop(event);">
    ------Re-arranged List------</div>
</div>
<script>
function onDragStart(event) {
  event
    .dataTransfer
    .setData('text/plain', event.target.id);

  event
    .currentTarget
    .style
    .backgroundColor = '#7f5db8';
}


function onDragOver(event) {
  event.preventDefault();
}



function onDrop(event) {
 const id = event
    .dataTransfer
    .getData('text');
 
 const draggableElement = document.getElementById(id);
 const dropzone = event.target;
 dropzone.appendChild(draggableElement);

  event
    .dataTransfer
    .clearData();
}
</script>
</body>
</html>

Hope this solves your issue !!!
Happy Coding.

DYNAMICMORTAL0
Related