jquery draggable ui.draggable.show（）在删除功能后不起作用答案

【问题标题】：j query dragabble ui.draggable.show() not working after delete functionjquery draggable ui.draggable.show（）在删除功能后不起作用
【发布时间】：2021-04-20 06:31:54
【问题描述】：

 $('#dropzone').droppable({
                activeClass: 'active',
                hoverClass: 'hover',
                accept: ":not(.ui-sortable-helper)", 
                drop: function (e, ui) {
                    let item = $(ui.draggable);
                      ui.draggable.hide();

                    let add_element = '<div class="drop-item" data-ui="dui"><details><summary>' + item.text() + '</summary>' +
                        '<div>' +
                        '<label>More test drop</label>' +
                        '<input type="text" id="members_gym_objectives" name="members_gym_objectives[]" value="' + item.text() + '"/>' +
                        '</div>' +
                        '</details>' + '<button type="button" onclick="$(this).parent().detach();ui.draggable.show();" class="btn btn-danger btn-xs remove"><i class="far fa-trash-alt p-0"></i></button>'
                    '</div>'

                    $(this).append(add_element);


                },
       


                over: function (event, ui) {
                     ui.draggable.hide();
                }
            }).sortable({
                items: '.drop-item',
                sort: function () {
              
                    $(this).removeClass("active");
                }
            });

我想在删除按钮中使用 ui.draggable.show() 函数，它将隐藏的可拖动标签更改为可见..但它不起作用

【问题讨论】：

欢迎来到 Stack Overflow。不清楚何时要show 项目。我在over 中看到你hide 的位置。在您创建的button 中的click 上？如果是这种情况，您必须将 click 事件绑定到按钮。
我们还需要一个最小的、可重现的示例：stackoverflow.com/help/minimal-reproducible-example

标签： jquery-ui jquery-ui-draggable

【解决方案1】：

考虑以下示例。

$(function() {
  $("#tags > div").draggable();
  $('#dropzone').droppable({
    activeClass: 'active',
    hoverClass: 'hover',
    accept: ":not(.ui-sortable-helper)",
    drop: function(e, ui) {
      var item = $(ui.draggable);
      item.hide();

      var dropItem = $("<div>", {
        class: "drop-item",
        "data-ui": "dui"
      }).appendTo(this);
      var details = $("<details>").appendTo(dropItem);
      $("<summary>").html(item.text()).appendTo(details);
      $("<div>").appendTo(details);
      $("<label>").html("More Tags").appendTo($("div", details));
      $("<input>", {
        type: "text",
        name: "members_gym_objectives[]",
        value: item.text()
      }).appendTo($("div", details));
      var removeButton = $("<button>", {
        type: "button",
        class: "btn btn-danger btn-xs remove"
      }).appendTo(dropItem);
      $("<i>", {
        class: "far fa-trash-alt p-0"
      }).appendTo(removeButton);

      removeButton.click(function() {
        item.show();
      });
    }
  }).sortable({
    items: 'div.drop-item',
    sort: function() {
      $(this).removeClass("active");
    }
  });
});

#tags {
  margin: 10px;
}

#tags>div {
  border: 1px solid #ccc;
  border-radius: 6px;
  width: 80px;
  padding: 7px;
  margin: 3px;
  display: inline-block;
}

.drop-item>button {
  float: right;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<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>

<div id="tags">
  <div>Tag 1</div>
  <div>Tag 2</div>
  <div>Tag 3</div>
  <div>Tag 4</div>
</div>
<hr />
<div id="dropzone">
  <div class="drop-item" data-ui="dui">
    <details>
      <summary>Item 1</summary>
      <div>
        <label>More test drop</label>
        <input type="text" name="members_gym_objectives[]" value="Item 1" />
      </div>
    </details>
    <button type="button" class="btn btn-danger btn-xs remove"><i class="far fa-trash-alt p-0"></i></button>
  </div>
</div>

根据您的描述，这将隐藏原始文件，直到单击删除按钮。

【讨论】：