Jquery 如何在我将拖动的对象放入区域后将其移除

参考下图，当我从下向上拖动对象时，我希望从底部栏中删除拖动的对象，当我按下

X

时，我希望对象回到底部栏中。但我无法删除拖动的对象（并根据需要将其恢复）。您可以查看下面的代码，也可以从

HTML

<p><b><i>In the text below some words are missing. Drag words from the box below to the appropriate place in the text. To undo an answer choice, drag the word back to the box below the text.</i></b></p>

<div class="row">
  <p class="given">
    He wants to get a better [blank] and earn more money. Managers set objectives, and decide [blank] their organization can achieve them. A defect can be caused [blank] negligen ce by one of the members of a team.
  </p>
</div>

<div class="divider"></div>
<br>
<div class="section">
  <section>
    <div class="card blue-grey ">
      <div class="card-content white-text">
        <div class="row">
          <div class="col s12">

            <span class="given btn-flat white-text red lighten-1" rel="1">the Santee, thDakota</span>
            <span class="given btn-flat white-text red lighten-1" rel="2">America</span>

            <span class="given btn-flat white-text red lighten-1" rel="3">Qatar</span>

            <span class="given btn-flat white-text red lighten-1" rel="4">Philippines</span>

          </div>
        </div>
      </div>
    </div>
  </section>
</div>

Javascript

$(document).ready(function() {
  var given = $("p.given").text();

  var new_given = given.replace(/blank/g, '  <div class="blanks"></div>  ');
  $("p.given").html(new_given);

  function updateDroppables() {
    $("div.blanks").droppable({
      accept: "span.given",
      classes: {
        "ui-droppable-hover": "ui-state-hover"
      },
      drop: function(event, ui) {
        var dragedElement = ui.draggable.text();
        console.log(dragedElement);
        $(this).replaceWith(
          " <span class='answers'><b class='blue-text' rel='" +
            ui.draggable.attr("rel") +
            "'>" +
            dragedElement +
            "</b> <a href='#' class='material-icons cancel md-16'>highlight_off</a></span> "
        );
      }
    });
  }

  updateDroppables();

  $("span.given").draggable({
    helper: "clone",
    revert: "invalid"
  });

  $(document).on("click", "a.cancel", function(e) {
    e.preventDefault();
    $(this)
      .parent()
      .replaceWith("<div class='blanks'></div>");
    updateDroppables();
  });
});

$（文档）.ready（函数（）{
var given=$（“p.given”）.text（）；
var new_gived=gived.replace（/blank/g'）；
$（“p.given”）.html（新增）；
函数updateDropTables（）{
$（“空白区”）。可拖放({
接受：“span.given”，
课程：{
“ui可拖放悬停”：“ui状态悬停”
},
drop：函数（事件、用户界面）{
var dragedElement=ui.draggable.text（）；
控制台日志（dragedElement）；
$（此）。替换为(
" " +
拖拽+
"  "
);
}
});
}
UpdateDropables（）；
$（“给定跨度”）.draggable({
助手：“克隆”，
回复：“无效”
});
$（文档）。在（“单击”，“a.取消”，功能（e）{
e、 预防默认值（）；
$（本）
.parent（）
.以（“”）代替；
UpdateDropables（）；
});
});

我认为您希望删除拖放后的元素，如果取消，则将其放回容器中

我使用

jQuery show（）、hide（）

函数实现了这一点。 删除发生后，所属元素将被隐藏

 drop: function(event, ui) {
    var dragedElement = ui.draggable.text();
    var dropped = ui.draggable;      
    dropped.hide(); //hide element

当按下“X”时，该元素将从文本中删除，并显示在底部容器中

$(document).on("click", "a.cancel", function(e) {
  e.preventDefault();
  var rel = $(this).prev().attr('rel');

 $(this)
  .parent()
  .replaceWith("<div class='blanks'></div>");
  updateDroppables();
 $('.btn-flat[rel='+rel+']').show(); //show element again
});

$（文档）。在（“单击”、“a.cancel”上，函数（e）{
e、 预防默认值（）；
var rel=$（this.prev（）.attr（'rel'）；
$（本）
.parent（）
.以（“”）代替；
UpdateDropables（）；
$（'.btn flat[rel='+rel+']'）.show（）；//再次显示元素
});

请查看我更新的代码笔：

---

Codepen或jsfiddle链接是受欢迎的，如果它们伴随您的问题本身，但不能替代它。这是因为在大多数情况下，钢笔或提琴会随着答案而更新，这会使问题对未来用户的帮助减少。为了获得帮助，您还必须提供帮助，您至少可以让您的问题与其他有类似问题的人相关。将“代码笔”中的代码添加到问题中，以便于用户回答问题。因此不鼓励链接。

$(document).on("click", "a.cancel", function(e) {
  e.preventDefault();
  var rel = $(this).prev().attr('rel');

 $(this)
  .parent()
  .replaceWith("<div class='blanks'></div>");
  updateDroppables();
 $('.btn-flat[rel='+rel+']').show(); //show element again
});