Question

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>

I'd like to have a click function:

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

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

drag and drop function

可拖动和放置

我也有可排序的功能。但每次我在droppable <a>中对列表进行排序时，它会在该列表中再添加一个serialize（符号＆＃34; x＆＃34;）。

任何人都能解决这两个问题吗？我真诚地感激！

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

Answer 1

从我看到的情况来看，使用两种可排序的connectWith选项更容易实现您尝试的目标。

尝试使用

实现此目标的主要问题

（droppable容器＆gt; draggable件商品）+ sortable

是你没有任何空间可以将项目从可排序项放回到紧密包装的可拖动项目中。但是当涉及到可排序时，它会自动插入帮助以便于删除。

因此，最好使$("#showdata")成为可排序，其中排序被禁用，如下所示：

＆＃13;

$("#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');
    });
  }
});

＆＃13;

<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>

＆＃13;

单击<a> element. Sorting the droppable table without adding more </a> <a> element

1 个答案: