通过点击< a>元素.在不添加更多< a>的情况下对可放置表格进行排序元素 [英] Draggable and droppable by clicking <a> element. Sorting the droppable table without adding more <a> element

问题描述

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

I used bootstrap css and JqueryUI to create a list in draggable <ul> and made a <div> as droppable area. Now the drag and drop both work properly.

    <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.单击"+"时，可以将列表添加到可放置的<div>中.

1.When clicking "+", the list can be added in droppable <div>.

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

2.When clicking "x", the list can be added back to where it was.

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

拖放功能

我也有可排序的功能.但是，每次我在可投放的<div>中对列表进行排序时，都会在该列表上再添加一个<a>(即符号"x").

I also have the sortable function. But everytime I sort a list in droppable <div>, it adds one more <a> (which is the symbol "x") on that list.

任何人都可以解决这两个问题吗? 我将由衷的感谢！

Anyone can be able to solve these two problems? I'll sincerely appreciate that!

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

Here is my JsFiddle https://jsfiddle.net/woodmanhu/87cjr896/5/

推荐答案

据我所知，使用尝试通过以下方法实现的主要问题

Major problem with trying to achieve this with

(droppable容器> draggable项目)+ sortable

(droppable container > draggable items ) + sortable

是您将没有空间将项目从可排序项目放回到紧密包装的可拖动项目中.但是当涉及到可排序时，它将自动插入帮助程序以方便删除.

is that you won't have any space to drop an item back from the sortable into tightly packed draggable items. But when it comes to sortable, it'll automatically insert helpers to facilitate dropping.

因此，最好将$("#showdata")设置为可禁用排序的可排序，如下所示:

So it is better to make $("#showdata") a sortable in which sorting is disabled, as shown below:

$("#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>的情况下对可放置表格进行排序元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！