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

我将拖放的对象放到区域中后如何删除它

1 个答案: