单击 <a> 元素可拖放。在不添加更多 <a> 元素的情况下对可放置 table 进行排序

Question

我使用 bootstrap css 和 JqueryUI 在可拖动 <ul> 中创建了一个列表，并制作了一个 <div> 作为可放置区域。现在拖放都可以正常工作。

    <ul id="showdata" class="list-group ui-helper-reset ui-droppable" style="overflow: auto; height: 200px; display: block;">
    <li class="list-group-item ui-draggable ui-draggable-handle">_Unassigned_<a href="#add" id="add_id" class="glyphicon glyphicon-plus" title="add group to selection" style="float: right"></a>

    </li>
    <li class="list-group-item ui-draggable ui-draggable-handle">_Unassigned_<a href="#add" id="add_id" class="glyphicon glyphicon-plus" title="add group to selection" style="float: right"></a>

    </li>
    <li class="list-group-item ui-draggable ui-draggable-handle">_Unassigned_<a href="#add" id="add_id" class="glyphicon glyphicon-plus" title="add group to selection" style="float: right"></a>

    </li>
    <li class="list-group-item ui-draggable ui-draggable-handle">_Unassigned_<a href="#add" id="add_id" class="glyphicon glyphicon-plus" title="add group to selection" style="float: right"></a>

    </li>
    <li class="list-group-item ui-draggable ui-draggable-handle">_Unassigned_<a href="#add" id="add_id" class="glyphicon glyphicon-plus" title="add group to selection" style="float: right"></a>

    </li>
    <li class="list-group-item ui-draggable ui-draggable-handle">_Unassigned_<a href="#add" id="add_id" class="glyphicon glyphicon-plus" title="add group to selection" style="float: right"></a>

    </li>
</ul>
<div class="col-md-6" id="dropdiv">
    <label for="Drag_Your_Selection_Here">Drag Your Selection Here</label>
    <div id="droppable" class="col-md-pull-12 ui-droppable" style="border: 2px solid gray; overflow: auto; height: 200px; display: block;"></div>
</div>

我想要一个点击功能：

1.When点击“+”，列表可以添加到droppable中<div>。

2.When 单击 "x"，列表可以添加回原来的位置。

var $showdata = $("#showdata"),
      $droppable = $("#droppable");
  // make draggable<ul>→<li> draggable//
  $("#showdata > li").draggable({
      cancel: "a.glyphicon.glyphicon-plus", // clicking an icon won't initiate dragging
      revert: "invalid", // when not dropped, the item will revert back to its initial position
      containment: "document",
      helper: "clone",
      cursor: "move"
  });

  //make droppable<div> droppable
  $droppable.droppable({
      accept: "#showdata > li",
      activeClass: "ui-state-highlight",
      hoverClass: "ui-state-hover",
      accept: ":not(.ui-sortable-helper)",
      drop: function (event, ui) {
          addlist(ui.draggable);
      }
  }).sortable({
      sort: function () {
          $(this).removeClass("ui-state-highlight");

      }
  }).disableSelection();

  // make DRAGGABLE<div> droppable, accepting items from droppable<div>
  $showdata.droppable({
      accept: "#droppable li",
      activeClass: "ui-state-highlight",
      drop: function (event, ui) {
          deletelist(ui.draggable);
      }
  });
  // init delete<a>
  var del_icon = "<a href='#del' id='del_id' class='glyphicon glyphicon-remove' title='delete group to selection' style='float: right'></a>";
        `
// find <li> to get back to where it was found
      function addlist($item) {
          $item.fadeOut(function () {
              var $list = $("ul", $droppable).length ? $("ul", $droppable) : $("<ul class='list-group ui-helper-reset'></ul>").appendTo($droppable);
              $item.find("a.glyphicon.glyphicon-plus").remove();
              $item.append(del_icon).appendTo($list).fadeIn();
          });
      };
      //init add<a>
      //var add_icon = "<a id='add_id' class='glyphicon glyphicon-plus' style='float: right'></a>";
      var add_icon = $("a.glyphicon.glyphicon-plus");

      //find <li> to delete
      function deletelist($item) {
          $item.fadeOut(function () {
              $item.find("a.glyphicon.glyphicon-remove").remove().end().append(add_icon).appendTo($showdata).fadeIn();
          });
      };
      // resolve the icons behavior with event delegation
      $($showdata > "li").click(function (event) {
          var $item = $(this),
              $target = $(event.target);

          if ($target.is("a.glyphicon.glyphicon-plus")) {
              deletelist($item);
          } else if ($target.is("a.glyphicon.glyphicon-remove")) {
              addlist($item);
          }
          return false;
      });`

drag and drop function

我也有排序功能。但是每次我在 droppable <div> 中对列表进行排序时，它都会在该列表上添加一个 <a>（即符号 "x"）。

谁能解决这两个问题？我将由衷感谢！

这是我的 JsFiddle https://jsfiddle.net/woodmanhu/87cjr896/5/

Answer 1

据我所知，使用两个 sortables 的 connectWith 选项可以更轻松地实现您的目标。

尝试通过

实现这一点的主要问题

(droppable 容器 > draggable 项目 ) + sortable

是您将没有任何 space 将项目从可排序项目放回紧密包装的可拖动项目。但是当涉及到 sortable 时，它会自动插入 helpers 以方便删除。

所以最好把$("#showdata")做成一个sortable，其中sorting is disabled，如下图：

$("#showdata").sortable({
  revert: "invalid",
  helper: "clone",
  connectWith: "#droppable",
  receive: function(e, ui) {
    ui.item.fadeOut(function() {
      ui.item.appendTo(this).fadeIn().find("a.glyphicon.glyphicon-remove").removeClass('glyphicon-remove').addClass('glyphicon-plus');
    });
  },
  stop: function(e, ui) {
    if (ui.item.parent().attr('id') == 'showdata') {
      $('#showdata').sortable("cancel");
    }
  }
});
$("#droppable").sortable({
  accept: "#showdata > li",
  accept: ":not(.ui-sortable-helper)",
  connectWith: "#showdata",
  receive: function(e, ui) {
    var $this = this;
    ui.item.fadeOut(function() {
      $(this).appendTo($this).fadeIn().find("a.glyphicon").removeClass('glyphicon-plus').addClass('glyphicon-remove');
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<ul id="showdata" class="list-group ui-helper-reset ui-droppable" style="overflow: auto; height: 200px; display: block;">
  <li class="list-group-item ui-draggable ui-draggable-handle">1
    <a href="#add" id="add_id" class="glyphicon glyphicon-plus" title="add group to selection" style="float: right"></a>

  </li>
  <li class="list-group-item ui-draggable ui-draggable-handle">2
    <a href="#add" id="add_id" class="glyphicon glyphicon-plus" title="add group to selection" style="float: right"></a>

  </li>
  <li class="list-group-item ui-draggable ui-draggable-handle">3
    <a href="#add" id="add_id" class="glyphicon glyphicon-plus" title="add group to selection" style="float: right"></a>

  </li>
  <li class="list-group-item ui-draggable ui-draggable-handle">4
    <a href="#add" id="add_id" class="glyphicon glyphicon-plus" title="add group to selection" style="float: right"></a>

  </li>
  <li class="list-group-item ui-draggable ui-draggable-handle">5
    <a href="#add" id="add_id" class="glyphicon glyphicon-plus" title="add group to selection" style="float: right"></a>

  </li>
  <li class="list-group-item ui-draggable ui-draggable-handle">6
    <a href="#add" id="add_id" class="glyphicon glyphicon-plus" title="add group to selection" style="float: right"></a>

  </li>
</ul>
<div class="col-md-6" id="dropdiv">
  <label for="Drag_Your_Selection_Here">Drag Your Selection Here</label>
  <ul id="droppable" class="col-md-pull-12 ui-droppable" style="border: 2px solid gray; overflow: auto; height: 200px; display: block;"></ul>
</div>

单击 <a> 元素可拖放。在不添加更多 <a> 元素的情况下对可放置 table 进行排序

Draggable and droppable by clicking <a> element. Sorting the droppable table without adding more <a> element

javascript

jquery

jquery-ui

jquery-ui-sortable

jquery-ui-draggable