Как сделать так, чтобы перетаскиваемый div удалялся при перетаскивании div

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

Я пытался сделать что-то подобное, но он просто удаляет корзину:

      $(function() {
    
    var trash = document.getElementById('trash');

    $(trash).droppable({
      drop: function( event, ui ) { 
             $(this).remove("div");
      }
    });
  });

Я пытался определить, что <div></div> упал, но не знал, как это сделать.

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

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

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

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

          $( "#temp" ).remove();
      }
    });
  });


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



$(function () {
    $("td").dblclick(function (e) {
        e.stopPropagation();
        var currentEle = $(this);
        var value = $(this).html();
        updateVal(currentEle, value);
    });
});

function updateVal(currentEle, value) {
    $(currentEle).html('<input class = "thVal" type = "text" value = "' + text + '" />');
    $(".thVal").focus();
    $(".thVal").keyup(function (event) {
        if (event.keyCode == 13) {
            $(currentEle).html($(".thVal").val().trim());
        }
    });

    $(document).click(function () {
            $(currentEle).html($(".thVal").val().trim());
    });
}

}


var div = document.getElementsByClassName('div');

  $( "td" ).hover(
  function() {
    $( this ).append( $( "<button>Delete</button>" ) ).attr('id', 'melement');


    function dump() {
      $(this).parent().html("").removeClass("div");
    }
    
    $( "#melement button" ).on( "click", dump );
    }, function() {
      $( this ).find( "button" ).last().remove();
    }
  );


  $(function() {
    
    var trash = document.getElementById('trash');

    $(trash).droppable({
      drop: function( event, ui ) { 
             $(this).remove("div");
      }
    });
  });

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 {

}


.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;
}

.trash {
  background-color: red;
  height: 100px;
  width: 100px;
}

<!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>
    <input id = "input" type = "text" placeholder = "input">
    <button onclick = "addElement()" >input</button> 


<div id = "trash" class = "trash">Trash Can</div>

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

</html>

javascript html css

12.12.2020 20:58

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

416

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Используя ui.draggable[i].remove(), вы можете получить элемент, перетаскиваемый внутри этой функции, используя цикл for. Прокрутите объект ui.draggable и используйте увеличенную переменную в цикле for i в качестве ключа для нацеливания на выбранный перетаскиваемый элемент.

Обновлено: добавлен цикл for для перебора элементов ui.draggable, чтобы нацелиться на элемент, который перетаскивается, когда добавлено более одного перетаскиваемого элемента. Также я бы изменил вашу функцию, которая добавляет идентификатор в созданный div, содержащий текстовый элемент, созданный для объединения числа с идентификатором, иначе у вас будут идентичные идентификаторы при добавлении более одного текстового элемента.

$(function() {
  var trash = document.getElementById('trash');
  $(trash).droppable({
    drop: function(event, ui) {
      for (let i = 0; i < ui.draggable.length; i++) {
        ui.draggable[i].remove();
      }
    }
  });
});

В своем вопросе вы удаляете событие с помощью $(this), которое является мусорным ведром.

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

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

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

        $("#temp").remove();
      }
    });
  });


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



  $(function() {
    $("td").dblclick(function(e) {
      e.stopPropagation();
      var currentEle = $(this);
      var value = $(this).html();
      updateVal(currentEle, value);
    });
  });

  function updateVal(currentEle, value) {
    $(currentEle).html('<input class = "thVal" type = "text" value = "' + text + '" />');
    $(".thVal").focus();
    $(".thVal").keyup(function(event) {
      if (event.keyCode == 13) {
        $(currentEle).html($(".thVal").val().trim());
      }
    });

    $(document).click(function() {
      $(currentEle).html($(".thVal").val().trim());
    });
  }

}


var div = document.getElementsByClassName('div');

$("td").hover(
  function() {
    $(this).append($("<button>Delete</button>")).attr('id', 'melement');


    function dump() {
      $(this).parent().html("").removeClass("div");
    }

    $("#melement button").on("click", dump);
  },
  function() {
    $(this).find("button").last().remove();
  }
);


$(function() {
  var trash = document.getElementById('trash');
  $(trash).droppable({
    drop: function(event, ui) {
      for (let i = 0; i < ui.draggable.length; i++) {
        ui.draggable[i].remove();
      }
    }
  });
});

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 {}

.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;
}

.trash {
  background-color: red;
  height: 100px;
  width: 100px;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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>
  <input id = "input" type = "text" placeholder = "input">
  <button onclick = "addElement()">input</button>


  <div id = "trash" class = "trash">Trash Can</div>

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

</html>

Это потенциально может привести к сбою, когда вы создаете два (или более) элемента с одним и тем же идентификатором - это как раз текущий случай. Каждый элемент создается с идентификатором temp'.

— 12.12.2020 22:07

Добавлен цикл for для перебора элементов пользовательского интерфейса.

— 12.12.2020 22:21

12.12.2020 21:33

Вам нужно получить элемент, который вы хотите удалить. Это можно взять из параметра event, который вы передаете в обратном вызове droppable.

$(trash).droppable({
  drop: function( event, ui ) { 
       $(event.toElement).remove();
  }
 });`

event.toElement получает элемент, который вы отбрасываете. Тогда вы просто можете вызвать remove на него.

12.12.2020 21:39

Другие вопросы по теме

Что такое документ?

Простой переход переключения Div с помощью jQuery

Расстояние между элементами с DIV

Что такое атрибут data-gr-c-s-loaded="true", добавленный в мой код

Может ли кто-нибудь помочь мне изменить медиа-запрос с максимальной ширины на минимальную ширину?

Как сделать так, чтобы мой контент отдавал предпочтение левой колонке в CSS

События щелчка тега привязки не работают после отображения данных с использованием ajax

Как я могу удалить стиль отображения из всех дочерних элементов, когда я фильтрую из бутстрапа?

TailwindCSS — исправлена полная ширина div родителя flex

Вводимое мной входное значение не отображается в JavaScript

Как сделать так, чтобы перетаскиваемый div удалялся при перетаскивании div

Ответы 2

Другие вопросы по теме

Похожие вопросы