将拖动的对象放入区域后如何将其删除

Question

参考下图，当我将对象从下往上拖动时，我希望拖动的对象从底部栏中删除，当我按下 X 时，我希望对象返回在底栏中。但是我无法删除拖动的对象（并通过扩展根据需要将其带回）。您可以查看下面的代码或从 my codepen

访问它

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>

CSS

div.blanks {
  display: inline-block;
  min-width: 50px;
  border-bottom: 2px solid #000000;
  color: #000000;
}

div.blanks.ui-droppable-active {
  min-height: 20px;
}

span.answers > b {
  border-bottom: 2px solid #000000;
}

span.given {
  margin: 5px;
}

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();
  });
});

Answer 1

我认为您想在拖放后删除拖动的元素，如果取消则将其放回您的容器。

我用 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
});

请看我更新的代码笔：

Pen

将拖动的对象放入区域后如何将其删除

How to remove the dragged object after I drop it in area

jquery

jquery-ui-draggable