j 查询dragabble ui.draggable.show() 删除功能后不起作用

问题描述

 $('#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() 函数，这会将隐藏的可拖动标签更改为可见......但它不起作用

解决方法

考虑以下示例。

matrix[3][2]

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

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