Question

我使用jquery在两个表之间开发了可排序的功能。关注此网址：jsfiddle.net/tilwinjoy/shLQE/
拖动项目文章＃1，文章＃2从可用到我的文章。我只想把文章＃1放在我的文章中，文章＃2又回到可用区域。我试过但没做过。有谁能够帮我？非常感谢。

Answer 1

我已更新您的jsfiddle，并在此处发布可运行代码：

＆＃13;

$(function() {
  $('.droptrue').on('click', 'li', function() {
    $(this).toggleClass('selected');
  });
  var lastItem;
  $("ul.droptrue").sortable({
    connectWith: 'ul.droptrue',
    opacity: 0.6,
    revert: true,
    helper: function(e, item) {
      if (!item.hasClass('selected'))
        item.addClass('selected');
      var elements = $('.selected').not('.ui-sortable-placeholder').clone();
      var helper = $('<ul/>');
      item.siblings('.selected').addClass('hidden');
      return helper.append(elements);
    },
    start: function(e, ui) {
      var elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');
      ui.item.data('items', elements);
    },
    receive: function(e, ui) {
      ui.item.before(ui.item.data('items'));
    },
    stop: function(e, ui) {
      ui.item.siblings('.selected').removeClass('hidden');
      $('.selected').removeClass('selected');
      revertArticle();
    },
    update: updatePostOrder
  });

  $("#sortable1, #sortable2").disableSelection();
  $("#sortable1, #sortable2").css('minHeight', $("#sortable1").height() + "px");
  updatePostOrder();
});

function revertArticle() {
  var widget = $("#sortable2").sortable("widget");
  var matchedItems = $.grep(widget[0].children, function(item) {
    return (item.id == "article_1" || item.id == "article_2")
  });
  if ($(matchedItems).length > 1) {
    $("#sortable1").append($.grep(widget[0].children, function(item) {
      return (item.id == "article_1")
    }));
    $("#sortable1").sortable('refresh');
    updatePostOrder();
  }
}
var arr = [];

function updatePostOrder() {
  arr = [];
  $("#sortable2 li").each(function() {
    arr.push($(this).attr('id'));
  });
  $('#postOrder').val(arr.join(','));
}

＆＃13;

.listBlock {
  float: left;
}
#sortable1,
#sortable2 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-right: 100px;
  background: #eee;
  padding: 5px;
  width: 300px;
  border: 1px solid black;
}
#sortable1 li,
#sortable2 li {
  color: black;
  cursor: move;
  margin: 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 250px;
  background: none;
  background-color: white;
}
.selected {
  background: red !important;
}
.hidden {
  display: none !important;
}
ul {
  list-style-type: none;
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/mint-choc/jquery-ui.css" rel="stylesheet" />
<div id="maincontainer">
  <div id="navtoplistline">&nbsp;</div>
  <div id="contentwrapper">
    <div id="maincolumn">
      <div class="text">
        <hr />
        <div class="listBlock">
          <h2>Available</h2>

          <ul id="sortable1" class='droptrue'>
            <li id="article_1">Article #1</li>
            <li id="article_2">Article #2</li>
            <li id="article_3">Article #3</li>
          </ul>
        </div>
        <div class="listBlock">
          <h2>My Articles</h2>

          <ul id="sortable2" class='droptrue'>

          </ul>
        </div>
        <br clear="both" />
        <p>Which articles, in which order?:
          <br />
          <input type="text" id="postOrder" name="postOrder" value="" size="30" />
        </p>
      </div>
    </div>
  </div>
</div>

＆＃13;

在排序两个表jquery时取消多个选择之一

1 个答案: