Jquery 拖拽删除答案

【问题标题】：Jquery Drag to DeleteJquery 拖拽删除
【发布时间】：2016-06-15 14:26:25
【问题描述】：

我目前正在玩一些 jquery，当我尝试创建一个简单的待办事项列表时遇到了一个问题。

到目前为止，我们的目标是能够通过单击绿色方块添加段落并通过单击一次然后将其拖动到红色方块来删除它们。

除了删除拖动的段落之外，一切都很好。

现在它只能通过删除整个班级来工作，但我只想删除拖动的班级。

这里的代码：https://codepen.io/anon/pen/OXXXpY

jQuery:

$(document).ready(function() {

  var send = $("#send");
  var dlt = $("#delete");

  send.click(function() {

      var input = $("input").val();

      $("#container").prepend("<p class='entry'>" + input + "</p>");


  });

  $(document).on("click", ".entry", function() {

      $(this).draggable();
      $("#delete").droppable({

        drop: function() {$(".entry").remove();}
      });
  });


});

请不要介意我的英语和这个项目的实际用途。这只是一个 jQuery 实验。

【问题讨论】：

标签： javascript jquery user-interface jquery-ui

【解决方案1】：

使用$(this) 定位拖动的元素

$(document).on("click", ".entry", function() {
      var $this = $(this);
      $(this).draggable();
      $("#delete").droppable({

        drop: function() {
          $($this).remove();
        }
      });
});

$(document).ready(function() {

  var send = $("#send");
  var dlt = $("#delete");

  send.click(function() {

      var input = $("input").val();
      $("#container").prepend("<p class='entry'>" + input + "</p>");

  });

  $(document).on("click", ".entry", function() {
      var $this = $(this);
      $(this).draggable();
      $("#delete").droppable({
        drop: function() { $($this).remove(); }
      });
  });

});

body {
  text-align: center;
}
h1 {
  font-family: Helvetica;
}
form input {
  width: 500px;
  font-size: 30px;
}
form input:focus {
  outline: none;
}
.inline {
  display: inline-block;
}
#send {
  width: 40px;
  height: 40px;
  background-color: green;
}
#delete {
  width: 40px;
  height: 40px;
  background-color: red;

}
.entry {
  font-family: helvetica;
  border: solid 1px grey;
  -webkit-user-select: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<h1>ToDo</h1>
<form class="">
        <div class="inline" id="delete"></div>
          <input type="text" name="input" value="">
        <div class="inline" id="send"></div>
</form>
<div id="container"></div>

【讨论】：