Question

我在骨干视图中有几个可排序的列表

    this.$(".users:not('.client')").sortable({
            connectWith: ".users:not('.client')",
            helper: 'clone',
            revert: true,
            start: function(e, ui) {
                ui.item.parent().add('droppable-active');
            },
            over: function(e, ui) {
                $('.droppable-active').removeClass('droppable-active');
                $(this).addClass('droppable-active');
            },
            stop: function(e, ui) {
                ui.item.parent().removeClass('droppable-active');
            },
            receive: function(e, ui) {
                //do save
            }
    });

我想要的是阻止用户在其原始父级中删除列表项，并触发保存。如果将列表项添加到其原始父类可排序列表中，是否只需要执行类似的还原？

以下是可排序列表的jsbin示例

jsbin.com/mabarevuhe/4

Answer 1

我已编辑您的代码，请检查

/*
$(".user__item").draggable({
			opacity: 0.7, 
			helper: "clone",
			connectToSortable:".users",
			cursor:'move'
		});
*/

$(".users:not(.client)").sortable({
  connectWith: ".users:not(.client)",
  helper: 'clone',
  revert: false,
  start: function(e, ui) {

    ui.item.parent().add('droppable-active');
  },
  over: function(e, ui) {

    $('.droppable-active').removeClass('droppable-active');
    $(this).addClass('droppable-active');
  },
  stop: function(e, ui) {
    if ($(ui.item).parent()[0] == this) {
      $(this).sortable('cancel');
      return;
    }
    ui.item.parent().removeClass('droppable-active');
  },
  receive: function(e, ui) {

  }
});

<!DOCTYPE html>
<html>

<head>
  <link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>

  <ul class="users project_manager" data-parent="project_manager">
    <li class="user__item">Harry Potter</li>
    <li class="user__item">Albus Dumbledore</li>
  </ul>

  <ul class="users collaborators" data-parent="collaborators">
    <li class="user__item">Rom Weasley</li>
    <li class="user__item">Fred Weasley</li>
    <li class="user__item">George Weasley</li>
  </ul>

  <ul class="users clients" data-parent="clients">
    <li class="user__item">Rita Skeeter</li>
    <li class="user__item">Sirius Black</li>
  </ul>

  <ul class="users organisations" data-parent="organisations">
    <li class="user__item">Draco Malfoly</li>
    <li class="user__item">Neville Longbottom</li>
    <li class="user__item">Luna Lovegood</li>
  </ul>

</body>

</html>

jQuery可排序停止在原始父级中删除

1 个答案: