Guide on dragging and dropping without losing the item, allowing for continuous drag and drop functionality

Question

Guide on dragging and dropping without losing the item, allowing for continuous drag and drop functionality

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}


<div class = “container”>
  <div class = “row” >
    <div class="col-md-1 center">
      <img src="https://i.sstatic.net/vxnww.jpg" style="height: 250px">
    </div>
    <div class="col-md-1">
      <div class="boxFirstCol" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
      <p><b>4s</b></p>
      <div class="box"> </div>
      <p><b>3s</b></p>
      <div class="box"> </div>
      <p><b>2s</b></p>
      <div class="box"> </div>
      <p><b>1s</b></p>
    </div>
  </div>
</div>

The functionality of this code allows users to drag electrons into the designated boxes and upon dropping them, they disappear from the box.

javascript jquery html css drag-and-drop

Answer 1

Answer №1

Follow these steps for optimal results:

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

function initiateDrag(event) {
  event.dataTransfer.setData("text", event.target.id);
}

function finalizeDrop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("text");
  var copiedElement = document.getElementById(data).cloneNode(true);
  copiedElement.id = "unique_element_1"; // Ensure each element has a distinct id.
  event.target.appendChild(copiedElement);
}

To successfully replicate the element, remember to utilize cloneNode(true).

Answer 2

Follow these steps for optimal results:

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

function initiateDrag(event) {
  event.dataTransfer.setData("text", event.target.id);
}

function finalizeDrop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("text");
  var copiedElement = document.getElementById(data).cloneNode(true);
  copiedElement.id = "unique_element_1"; // Ensure each element has a distinct id.
  event.target.appendChild(copiedElement);
}

To successfully replicate the element, remember to utilize cloneNode(true).

Guide on dragging and dropping without losing the item, allowing for continuous drag and drop functionality

Answer №1

Similar questions

Do arrays permanently retain the strings stored within them?

Problem with Material-UI Drawer

Incorporating Content-Disposition headers to enable the file to be both downloaded and opened

Can files in a directory be listed using JavaScript without the need for HTML tags?

Should you prioritize internationalizing your image alt attributes?

How can you create an ordered list with letters and parentheses using HTML5 and CSS?

PHP encountered an error while encoding JSON: The final record is empty

Having trouble opening a local file through a link on a local webpage

Exploring the intricacies of defining Vue component props in TypeScript using Vue.extend()

Evolving the appearance of every vacant element

Customize the Underline Color in MaterialUI Select Component

Steps to avoid TypeError: e.target.getAttribute is not a function

Authenticating the identity of the client application - the client is currently within the browser

What is the best way to display user input within a paragraph using React?

Framework designed to be compatible with Internet Explorer 7 for seamless

The process of generating collection names dynamically based on user information

Select the even-numbered occurrences of a specific class in CSS using the nth-child()

Tips for rotating individual letters within a sentence on popular web browsers, including Chrome

List of items displayed in alphabetical order using the ng-repeat directive:-

Retrieving the value of a PHP function using JavaScript