CODEWITHSUNDEEP
javascripthtmljquerycss
hp2345
hp2345

Reputation: 149

When dynamically added div is dropped, the last created div follows it

I have this program that can create draggable divs. the user can then drop the divs into tds. The problem that I'm running is a bit confusing so i've provided an example that will hopefully sum up the problem.

Example:

Let's say you make three divs, when I drag the div that was made second and drop it over a td the previously made div (in this example the first div that was made) ends up next to the dropped div and it's text is also changed to the div that was just dropped.

I'm not quite sure why this is, is it because my divs all have the same Id #temp? If this is too confusing please let me know.

Pictures of problem:

  1. Create 3 divs. Create 3 divs

  2. Drags 2nd div to a td and drops it. Drags 2nd div to a td and drops it

  3. The div that was made previously follows it and it's text is changed to the one that was dropped into the td. The div that was made previously follows it and it's text is changed to the one that was dropped into the td

Here is a full version of my code:

var text;
var selectedText;
var inputBox = document.getElementById("input");

function showInputBox(){
   inputBox.style.display = "block";
}

function addElement() { 
 text = document.getElementById("input").value;

  // create a new div element and give it a unique id
  var newDiv = document.createElement("div");
  newDiv.id = 'temp'

  // and give it some content
  var newContent = document.createTextNode(text); 
  
  // add the text node to the newly created div
  newDiv.appendChild(newContent);  

  // add the newly created element and its content into the DOM
  var currentDiv = document.getElementById("div1"); 
  document.body.insertBefore(newDiv, currentDiv); 

  $(function() {
    

    $("div").draggable({
     drag: function (e) {
         selectedText = event.target;
         text = $(selectedText).html();     
    }
    });
    $("#temp").draggable({
      drag: function (e) {
         selectedText = event.target;
         text = $(selectedText).html();
    }
    });



    $("td").droppable({
      drop: function( event, ui ) { 
        var selectedDiv = event.target;
          $( this )
          .addClass("div")
            .html(text);
              $("div").draggable();

          $( "#temp" ).remove();
      }
    });
  });
  document.getElementById("input").value = " ";
}

function addRedElement() { 
 text = document.getElementById("input").value;

  // create a new div element and give it a unique id
  var newDiv = document.createElement("div");
  newDiv.style.backgroundColor = "red";
  newDiv.id = 'temp'

  // and give it some content
  var newContent = document.createTextNode(text); 
  
  // add the text node to the newly created div
  newDiv.appendChild(newContent);  

  // add the newly created element and its content into the DOM
  var currentDiv = document.getElementById("div1"); 
  document.body.insertBefore(newDiv, currentDiv); 

  $(function() {
    

    $("div").draggable({
     drag: function (e) {
         console.log('being dragged');
         selectedText = event.target;
         text = $(selectedText).html();
         console.log(text);
    }
    });
    $("#temp").draggable({
      drag: function (e) {
         console.log('being dragged');
         selectedText = event.target;
         text = $(selectedText).html();
         console.log(text);
    }
    });



    $("td").droppable({
      drop: function( event, ui ) { 
        var selectedDiv = event.target;
          $( this )
          .addClass("div")
            .html(text);
              $("div").draggable();

          $( "#temp" ).remove();
      }
    });
  });
  document.getElementById("input").value = " ";
}
body{
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

div {
  text-align: center;
  border: 1px solid #d3d3d3;
  width: 100px;
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}

.blank {

}

.div3 {
  position: absolute;
  text-align: center;
  border: 1px solid #d3d3d3;
  padding: 10px;
  cursor: move;
  z-index: 10;
  height: 20px ;
  background-color: white;
  width: 20px;
  color: #fff;
}


.div {
  text-align: center;
  padding: 10px;
  cursor: move;
  background-color: #2196F3;
  color: #fff;
}

td{
  border: 1px solid #d3d3d3;
  padding: 10px;
  height: 20px ;
  width: 200px;
}

div:hover {
  background-color: yellow;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
      <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    <link href="style.css" rel="stylesheet" type="text/css" />
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  </head>
  <body>
<h1>Input text:</h1>
<p>input text and it will become a draggable div. You can then drag it to one of the tds </p>
    <input id="input" type="text" value="text">
    <button onclick="addElement()" >input</button> 

    <p>Drag your outputs to the div:</p>

<table border="1">
  <tr>
    <td height="50" width=100></td>
    <td height="50" width=100></td>
    <td height="50" width=100></td>
  </tr>
</table>


     <script src="script.js"></script>
  </body>

</html>

Upvotes: 2

Views: 81

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

is it because my divs all have the same Id #temp?

Yes!

You even had this comment at the right place! // create a new div element and give it a unique id

That's exactly the problem. An id must be unique. Because it isn't, when you target #temp it always targets the first one of the page.

So you need to have unique ids... Below, I siimply used the elementCounter variable set to zero. Each time you create a div, it is used as part of the id and then incremented.

Now in the drag function, I used the currentlyDragged variable to store the id of the element to be removed in the drop function. Notice I used an attribute selector to target the divs starting with "temp" and set the drag function.

And that's working.

var text;
var selectedText;
var inputBox = document.getElementById("input");

function showInputBox(){
   inputBox.style.display = "block";
}

var elementCounter = 0;
function addElement() { 
 text = document.getElementById("input").value;

  // create a new div element and give it a unique id
  var newDiv = document.createElement("div");
  newDiv.id = 'temp'+elementCounter;
  elementCounter++

  // and give it some content
  var newContent = document.createTextNode(text); 
  
  // add the text node to the newly created div
  newDiv.appendChild(newContent);  

  // add the newly created element and its content into the DOM
  var currentDiv = document.getElementById("div1"); 
  document.body.insertBefore(newDiv, currentDiv); 

  $(function() {
    
    var currentlyDragged;
 
    /*$("div").draggable({
     drag: function (e) {
         currentlyDragged = e.target.id
         selectedText = event.target;
         text = $(selectedText).html();     
    }
    });*/
    $("[id^='temp']").draggable({
      drag: function (e) {
         currentlyDragged = e.target.id
         selectedText = event.target;
         text = $(selectedText).html();
    }
    });



    $("td").droppable({
      drop: function( event, ui ) { 
        var selectedDiv = event.target;
          $( this )
          .addClass("div")
            .html(text);
              $("div").draggable();

          $( "#"+currentlyDragged ).remove();
      }
    });
  });
  document.getElementById("input").value = " ";
}

function addRedElement() { 
 text = document.getElementById("input").value;

  // create a new div element and give it a unique id
  var newDiv = document.createElement("div");
  newDiv.style.backgroundColor = "red";
  newDiv.id = 'temp'

  // and give it some content
  var newContent = document.createTextNode(text); 
  
  // add the text node to the newly created div
  newDiv.appendChild(newContent);  

  // add the newly created element and its content into the DOM
  var currentDiv = document.getElementById("div1"); 
  document.body.insertBefore(newDiv, currentDiv); 

  $(function() {
    

    $("div").draggable({
     drag: function (e) {
         console.log('being dragged');
         selectedText = event.target;
         text = $(selectedText).html();
         console.log(text);
    }
    });
    $("#temp").draggable({
      drag: function (e) {
         console.log('being dragged');
         selectedText = event.target;
         text = $(selectedText).html();
         console.log(text);
    }
    });



    $("td").droppable({
      drop: function( event, ui ) { 
        var selectedDiv = event.target;
          $( this )
          .addClass("div")
            .html(text);
              $("div").draggable();

          $( "#temp" ).remove();
      }
    });
  });
  document.getElementById("input").value = " ";
}
body{
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

div {
  text-align: center;
  border: 1px solid #d3d3d3;
  width: 100px;
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}

.blank {

}

.div3 {
  position: absolute;
  text-align: center;
  border: 1px solid #d3d3d3;
  padding: 10px;
  cursor: move;
  z-index: 10;
  height: 20px ;
  background-color: white;
  width: 20px;
  color: #fff;
}


.div {
  text-align: center;
  padding: 10px;
  cursor: move;
  background-color: #2196F3;
  color: #fff;
}

td{
  border: 1px solid #d3d3d3;
  padding: 10px;
  height: 20px ;
  width: 200px;
}

div:hover {
  background-color: yellow;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
      <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    <link href="style.css" rel="stylesheet" type="text/css" />
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  </head>
  <body>
<h1>Input text:</h1>
<p>input text and it will become a draggable div. You can then drag it to one of the tds </p>
    <input id="input" type="text" value="text">
    <button onclick="addElement()" >input</button> 

    <p>Drag your outputs to the div:</p>

<table border="1">
  <tr>
    <td height="50" width=100></td>
    <td height="50" width=100></td>
    <td height="50" width=100></td>
  </tr>
</table>


     <script src="script.js"></script>
  </body>

</html>

Upvotes: 1

Related Questions