Py学习  »  Jquery

在可排序函数(jquery)中实现抓取多个项

Murakami • 4 年前 • 447 次点击  

我不知道为什么这个可排序函数不能给出我想要的结果,即在我的可排序列表中抓取和删除选定的多个元素。

我的代码如下:

setUsersList() {
  $('ul').on('click', 'li', function (e) {
    if (e.ctrlKey || e.metaKey) {
      $(this).toggleClass("selected");
    } else {
      $(this).addClass("selected").siblings().removeClass('selected');
    }
  });

    $('.users-list').sortable({
        items: "li:not(.to-resize)",
        connectWith: '.users-list',
        placeholder: 'placeholder',
        helper: function (e, item) {
            var elements = item.parent().children('.selected:not(.to-resize)').clone(); //there are other elements in between which I don't want to select, that's why I'm using 'not' selector, elements gives the proper and desired output of all selected items
            item.data('multidrag', elements).siblings('.selected').remove();
            var helper = $('<li/>');
            return helper.append(elements);
        },
        stop: function (e, ui) {
            var elements = ui.item.data('multidrag');
            ui.item.after(elements);
  }
    });
    $('.users-list').disableSelection();
}

当我删除多个选定项时,我正在复制其中一个项(例如,第一个项按预期删除,第二个项复制)。如何修复它?

Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/39704
 
447 次点击  
文章 [ 1 ]  |  最新文章 4 年前
Twisty
Reply   •   1 楼
Twisty    5 年前

我注意到你的代码中有语法错误。这可能是因为它只是一个局部的例子。

您可以将数据添加到助手中,也可以简单地隐藏移动中的项目,然后在 stop . 下面是后者的一个例子:

$(function() {

  function setUsersList() {
    $('ul.sortable').on('click', 'li', function(e) {
      if (e.ctrlKey || e.metaKey) {
        $(this).toggleClass("selected");
      } else {
        $(this).addClass("selected")
          .siblings().removeClass('selected');
      }
    });

    $('.users-list').sortable({
      items: "> li:not(.to-resize)",
      connectWith: '.users-list',
      helper: function(e, item) {
        var list = item.parent();
        var elements = $('.selected:not(.to-resize)', list);
        if (elements.length === 0) {
          return item;
        }
        elements.addClass("move-hide");
        var helper = $('<li>', {
          class: "ui-state-default",
          style: "width: 178px"
        });
        helper.text(elements.length + " Users");
        return helper;
      },
      stop: function(e, ui) {
        var list = $(this);
        var elements = $(".move-hide", list);
        elements.each(function(ind, el) {
          ui.item.before($(el));
        });
        $(".move-hide", list).removeClass("move-hide selected");
      }
    });
    $('.users-list').disableSelection();
  }
  setUsersList();
});
.sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
}

.sortable li {
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2em;
  height: 1.5em;
}

.sortable li.selected {
  border-color: red;
}

.sortable li.move-hide {
  display: none;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="users-list-1" class="sortable users-list">
  <li class="ui-state-default">User 1</li>
  <li class="ui-state-default">User 2</li>
  <li class="ui-state-default">User 3</li>
  <li class="ui-state-default">User 4</li>
  <li class="ui-state-default">User 5</li>
  <li class="ui-state-default">User 6</li>
  <li class="ui-state-default">User 7</li>
</ul>

仍然存在一些逻辑问题,例如如果用户单击以拖动单个项,则会创建 mousedown , drag , drop , mouseup 一系列事件。发生的情况是,对单个列表项的排序完成,然后触发对该项的单击。

您也无法取消选择项目。你可以考虑加上这个。

希望能有所帮助。