社区所有版块导航
Python
python开源   Django   Python   DjangoApp   pycharm  
DATA
docker   Elasticsearch  
aigc
aigc   chatgpt  
WEB开发
linux   MongoDB   Redis   DATABASE   NGINX   其他Web框架   web工具   zookeeper   tornado   NoSql   Bootstrap   js   peewee   Git   bottle   IE   MQ   Jquery  
机器学习
机器学习算法  
Python88.com
反馈   公告   社区推广  
产品
短视频  
印度
印度  
Py学习  »  Jquery

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

Murakami • 5 年前 • 1132 次点击  

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

我的代码如下:

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
 
1132 次点击  
文章 [ 1 ]  |  最新文章 5 年前
Twisty
Reply   •   1 楼
Twisty    6 年前

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

您可以将数据添加到助手中,也可以简单地隐藏移动中的项目,然后在 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 一系列事件。发生的情况是,对单个列表项的排序完成,然后触发对该项的单击。

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

希望能有所帮助。