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

时间:2018-10-15 10:20:11

标签: jquery jquery-ui jquery-ui-sortable

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

我的代码如下:

org.apache.spark.sql.AnalysisException: Undefined function: 'testUdf'. This function is neither a registered temporary function nor a permanent function registered in the database 'default'.;

当我放下多个选定项目时,我要复制其中一个(例如,第一个已按预期删除,第二个已复制)。如何解决?

1 个答案:

答案 0 :(得分:0)

我注意到您的代码中有一些语法错误。这可能是因为它仅是部分示例。

您可以将数据添加到您的帮助器中,也可以简单地隐藏移动中的项目,然后在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>

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

您也无法取消选择项目。您可以考虑添加它。

希望有帮助。