Добавьте div к элементу с помощью метода jQuery .add()

У меня есть этот код, который может создавать <div></div>'s, которые можно перетаскивать. Я пытаюсь сделать так, чтобы перетаскиваемый <div></div>'s можно было перетаскивать в любой <td></td> и удалять перетаскиваемый div.

Сейчас у меня 1 проблема:

перетаскиваемый div не «попадает» в <td></td>

Итак, у меня есть один вопрос: есть ли способ добавить div к элементу с помощью метода jQuery .add()?

Вроде как ниже (я пробовал это, но это не сработало):

  $( "td" ).add("<div>"+ text +"</div>");

Более подробно это то, что моя программа стремится сделать:

Пользователь вводит некоторый текст и нажимает ввод -> ввод пользователя выводится как перетаскиваемый <div></div> -> перетаскиваемый div может быть перенесен в <td></td>

Вот мой полный код:

function addElement () { 
  var text = document.getElementById("input").value;
  // create a new div element 
  var newDiv = document.createElement("div");  

  // 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 div = document.getElementsByTagName('div'); 
    var td = document.getElementsByTagName('td');

    $(div).draggable();

    $(td).droppable({
      drop: function( event, ui ) {
        $( this ).find("td").append("<div>"+ text +"</div>");
        $(this).find("div").remove();
      }
    });

  });

    document.getElementById("input").value = " ";

}

body{
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

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

.div2 {
  position: absolute;
  text-align: center;
  border: 1px solid #d3d3d3;
  padding: 10px;
  cursor: move;
  z-index: 10;
  height: 20px ;
  background-color: red;
  width: 100px;
  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: 100px;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <meta name = "viewport" content = "width=device-width">
    <title>repl.it</title>
    <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>
    <input id = "input"type = "text" placeholder = " input">
    <button onclick = "addElement()" >input</button>   

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

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


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

</html>

Обновлять:

Я изменил это:

$(td).droppable({
      drop: function( event, ui ) {
        $( this ).find("td").append("<div>"+ text +"</div>");
        $(this).find("div").remove();
      }
    });

🤔 А знаете ли вы, что...
JavaScript обеспечивает обработку ошибок с использованием конструкции try...catch.

[РЕШЕНО]Перейти к решению

Javascript273878 вопросов Html113619 вопросов Jquery62551 вопрос Css75481 вопрос

Ответы:

вам нравится $( "div" ).remove(); удаляет все div, присутствующие на странице. который будет включать в себя любой новейший div, который создает ваш js. Вам нужно определить div, который вы перетаскиваете, и удалить этот конкретный экземпляр вместо всех div на странице.

Приятного чтения: https://api.jqueryui.com/draggable/

Надеюсь, этот код решит вашу проблему
Во-первых, нам нужно добавить droppable в jQuery:

$(td).droppable({
tolerance: 'fit'
});

Потому что td это ваш Dropped div

Затем добавил draggable вот так

От:

$(div).draggable();

К:

$(div).draggable({
  revert: 'invalid',
  stop: function(){
    $(this).draggable('option','revert','invalid');
  }
});

Это делает div Draggable

После этого используйте этот код, чтобы рассказать об их Droppable свойстве
От:

$(td).droppable({
  drop: function( event, ui ) {
    $( this )
      $( "td" ).add("<div>"+ text +"</div>");
      $( "div" ).remove();
  }
});

К:

$(div).droppable({
  greedy: true,
   tolerance: 'touch',
   drop: function(event,ui){
   ui.draggable.draggable('option','revert',true);
   $("td").append("<div>"+ text +"</div>");
   $("div").remove();
   }
});

Почему я изменил td на div??
Потому что ваш перетаскиваемый div и упал до td.
И я убрал $(this) из droppable и заменил .add на .append.

Этот выходной фрагмент

function addElement () { 
  var text = document.getElementById("input").value;
  // create a new div element 
  var newDiv = document.createElement("div");  

  // 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 div = document.getElementsByTagName('div'); 
    var td = document.getElementsByTagName('td');
    $(td).droppable({
    tolerance: 'fit'
    });
    $(div).draggable({
    revert: 'invalid',
    stop: function(){
        $(this).draggable('option','revert','invalid');
    }
    });

    $(div).droppable({
      greedy: true,
       tolerance: 'touch',
       drop: function(event,ui){
       ui.draggable.draggable('option','revert',true);
       $("td").append("<div>"+ text +"</div>");
       $("div").remove();
       }
    });

  });

    document.getElementById("input").value = " ";

}

body{
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

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

.div2 {
  position: absolute;
  text-align: center;
  border: 1px solid #d3d3d3;
  padding: 10px;
  cursor: move;
  z-index: 10;
  height: 20px ;
  background-color: red;
  width: 100px;
  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: 100px;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <meta name = "viewport" content = "width=device-width">
    <title>repl.it</title>
    <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>
    <input id = "input"type = "text" placeholder = " input">
    <button onclick = "addElement()" >input</button>   

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

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


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

</html>

Решено

Помимо неправильного назначения элементов. все остальное в порядке. Вы неправильно назначаете элементы div и td и удаляете их все одного типа с помощью функции remove.

function addElement () { 
  
  var 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() {
    var td = document.getElementsByTagName('td');

    $("#temp").draggable();

    $(td).droppable({
      drop: function( event, ui ) { console.info($(this))
          $( this ).append("<div>"+ text +"</div>");
          $( "#temp" ).remove();
      }
    });

  });

  document.getElementById("input").value = " ";

}

Это дополнительные возможности для оптимизации этого. Я настаиваю, чтобы вы изучили документацию.

Добавьте div к элементу с помощью метода jQuery .add()

Ответы:

Интересные вопросы для изучения