[SOLVED] drag and drop task in react js using buttons

drag and drop task in react js using buttons

In drag and drop if we have to do selection first and after that have to submit by clicking button so what type of functions or event handlers I have to use?

I have tried react-beautiful-dnd but still I am not having satisfied answer. I have this output

Solution

Here is a working example. The function copy_element(id) handles the copying of the item. This function is either called on a drop event or when the copybtn is clicked.

const source = document.getElementById('source');
const target = document.getElementById('target');
const copy = document.forms.copyform;

source.addEventListener('dragstart', e => {
  let id = e.target.closest('.item').dataset.id;
  e.dataTransfer.setData('text/plain', id);
});

target.addEventListener('dragover', e => {
  e.preventDefault();
});

target.addEventListener('drop', e => {
  e.preventDefault();
  let id = e.dataTransfer.getData('text/plain');
  copy_element(id);
});

source.addEventListener('change', e => {
  let form = e.target.form;
  form.copybtn.disabled = !form.item.value;
});

copy.copybtn.addEventListener('click', e => {
  let id = e.target.form.item.value;
  copy_element(id);
});

function copy_element(id) {
  // copy the item from source
  let item = source.querySelector(`div[data-id = "${id}"]`);
  let clone = item.cloneNode(true);
  clone.draggable = false;
  // append the copy to target
  target.append(clone);
  // unselect the item and disable the copy button
  [...copy.elements].forEach(input => input.checked = false);
  copy.copybtn.disabled = true;
}

body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1em;
}

#source {
  grid-row: 1;
  grid-column: 1;
  border: solid thin gray;
  min-height: 300px;
}

section#target {
  grid-row: 1;
  grid-column: 3;
  border: solid thin gray;
  min-height: 300px;
}

div.item {
  background-color: #ddd;
  margin: .3em;
  padding: .3em;
  min-height: 3em;
}

#source input {
  display: none;
}

#source input:checked~.item {
  background-color: #aaa;
}

<section id="source">
  <label>
    <input type="radio" name="item" value="item1" form="copyform" required>
    <div class="item" data-id="item1" draggable="true">Some element</div>
  </label>
  <label>
    <input type="radio" name="item" value="item2" form="copyform">
    <div class="item" data-id="item2" draggable="true">Another element</div>
  </label>
</section>
<form id="copyform">
  <button name="copybtn" type="button" disabled>>></button>
</form>
<section id="target"></section>