Javascript 单击按钮时触发可排序事件

我有3个div，在其中拖放值，但同时触发

div sortable

事件。如何在完成拖放过程后触发可排序事件

首先使用下面的代码进行拖放

var pushSectionIdvalueLayer1 = [];
var pushSectionIdvalueLayer2 = [];
var pushSectionIdvalueLayer3 = [];
var sectionDataLayer1 = [];
var sectionDataLayer2 = [];
var sectionDataLayer3 = [];
$(function() {
  var bSortable1Show = false;
  var bSortable2Show = false;
  var bSortable3Show = false;
  var iTotalItems = $("ul#sectionlist").children().length;
  var iCntSortable1 = $("ul#sortable1").children().length;
  var iCntSortable2 = $("ul#sortable2").children().length;
  var iCntSortable3 = $("ul#sortable3").children().length;

  function triggerSortable() {
    var iCntSortable1 = $("ul#sortable1").children().length;
    var iCntSortable2 = $("ul#sortable2").children().length;
    var iCntSortable3 = $("ul#sortable3").children().length;
    $(".ul-container").removeClass('connected ui-sortable');
    $(".ul-container").addClass('not-connected');
    if (iCntSortable1 == 0) {
      $("ul#sortable1").addClass('connected ui-sortable');
    } else if (iCntSortable1 > 0 && iCntSortable1 === (iCntSortable2 + 1)) {
      $("ul#sortable2").addClass('connected ui-sortable');
    } else if (iCntSortable1 > 0 && iCntSortable1 === iCntSortable2 && iCntSortable2 === (iCntSortable3 + 1)) {
      $("ul#sortable3").addClass('connected ui-sortable');
    } else if (iCntSortable1 > 0 && iCntSortable1 === iCntSortable2 && iCntSortable2 === iCntSortable3) {
      $("ul#sortable1").addClass('connected ui-sortable');
    }
  }
  $(".connected").sortable({
    connectWith: ".connected",
    start: function(event, ui) {
      triggerSortable();
    },
    update: function(event, ui) {
      triggerSortable();
    }
  }).disableSelection();
  triggerSortable();
});

并行触发3个div sortable事件。我想在我的操作完成后启动此事件

$(function() {
  $("#sectionlist").sortable({
    update: function(e, ui) {
      items = $("#sectionlist li");
      preference = 0;
      for (var x = 0; x < items.length; x++) {
        preference += 1;
      }
    }

  }).disableSelection();
});
$(function() {
  $("#sortable1").sortable({
    update: function(e, ui) {
      items = $("#sortable1 li");
      preferenceLayer1 = 0;
      sectionDataLayer1 = [];
      check = [];
      pushSectionIdvalueLayer1 = [];
      for (var x = 0; x < items.length; x++) {
        pushSectionIdvalueLayer1.push(preferenceLayer1);
        sectionDataLayer1.push(items[x].id);

        preferenceLayer1 += 1;
      }
    }

  }).disableSelection();
});
$(function() {
  $("#sortable2").sortable({
    update: function(e, ui) {
      items = $("#sortable2 li");
      preferenceLayer2 = 0;
      sectionDataLayer2 = [];
      pushSectionIdvalueLayer2 = [];
      for (var x = 0; x < items.length; x++) {
        pushSectionIdvalueLayer2.push(preferenceLayer2);
        sectionDataLayer2.push(items[x].id);
        preferenceLayer2 += 1;
      }
    }

  }).disableSelection();
});
$(function() {
  $("#sortable3").sortable({
    update: function(e, ui) {
      items = $("#sortable3 li");
      //console.log(items.length);
      preferenceLayer3 = 0;
      sectionDataLayer3 = [];
      pushSectionIdvalueLayer3 = [];
      for (var x = 0; x < items.length; x++) {
        pushSectionIdvalueLayer3.push(preferenceLayer3);
        sectionDataLayer3.push(items[x].id);
        preferenceLayer3 += 1;
      }
    }
  }).disableSelection();
});

$（函数（）{
$（“#分区列表”）。可排序({
更新：功能（e、ui）{
项目=$（“#分项清单li”）；
偏好=0；
对于（变量x=0；x

这是我的HTML代码

<table id="classTable" class="table table-bordered">
  <thead>
  </thead>
  <tbody>


    <tr>
      <td>Level 1</td>
      <td>Level 2</td>
      <td>Level 3</td>
      <td>All Section</td>
      <td>
        <asp:Button ID="btnSave" runat="server" Text="Save" class="btn btn-primary" OnClick="btnSave_Click" />
      </td>
    </tr>
    <tr>
      <td>
        <ul id="sortable1" class="ul-container connected" title="Level1">
          <li></li>
        </ul>
      </td>
      <td>
        <ul id="sortable2" class="ul-container connected" title="Level2">
          <li></li>
        </ul>
      </td>
      <td>
        <ul id="sortable3" class="ul-container connected" title="Level3">
          <li></li>
        </ul>
      </td>
      <td>
        <ul id="sectionlist" class="connected" title="SectionName" style="overflow:scroll;height:400px;">
        </ul>
      </td>
    </tr>

  </tbody>
</table>

一级
二级
三级
所有部分

我想在管理员单击按钮时触发此可排序代码

我尝试过这个，但不起作用：

$("#<%= btnSave.ClientID %>").on('click', function() {
  $('#sortable1').sortable('option', 'update');
  $('#sortable2').sortable('option', 'update');
  $('#sortable3').sortable('option', 'update');
});

$（“#”）在（'click'，function（）上{
$（'#sortable1'）。可排序（'option'，'update'）；
$（'#sortable2'）。可排序（'option'，'update'）；
$（'#sortable3'）。可排序（'option'，'update'）；
});

以下是我问题的解决方案：-请看一看

  $("#<%= btnSave.ClientID %>").on('click', function () {

            if (qString == "1") {
                //debugger;
                updateDivInEditMode();               
            }
});

$（“#”）在（'click'，函数（）{
如果（qString==“1”）{
//调试器；
updateDivInEditMode（）；
}
});

函数updateDivInEditMode（）{
//第1级
var项目1=$（“可排序1 li”）；
var偏好层1=0；
sectionDataLayer1=[]；
检查=[]；
pushSectionIdvalueLayer1=[]；
对于（变量x=0；x

---

我已在单个函数中再次使用相同的代码

如果您想回答自己的问题，请将其作为答案发布，而不是编辑原始问题。@DBS Ok先生。。。谢谢你的意见。。。我第一次这么做。。。

function updateDivInEditMode() {
            //For Level1 
            var items1 = $("#sortable1 li");
            var preferenceLayer1 = 0;
            sectionDataLayer1 = [];
            check = [];
            pushSectionIdvalueLayer1 = [];
            for (var x = 0; x < items1.length; x++) {
                pushSectionIdvalueLayer1.push(preferenceLayer1);
                sectionDataLayer1.push(items1[x].id);

                preferenceLayer1 += 1;
            }
            //For Level2
            var items2 = $("#sortable2 li");
            var preferenceLayer2 = 0;
            sectionDataLayer2 = [];
            pushSectionIdvalueLayer2 = [];
            for (var x = 0; x < items2.length; x++) {
                pushSectionIdvalueLayer2.push(preferenceLayer2);
                sectionDataLayer2.push(items2[x].id);
                preferenceLayer2 += 1;
            }
            //For Level3
            var items3 = $("#sortable3 li");
            var preferenceLayer3 = 0;
            sectionDataLayer3 = [];
            pushSectionIdvalueLayer3 = [];
            for (var x = 0; x < items3.length; x++) {
                pushSectionIdvalueLayer3.push(preferenceLayer3);
                sectionDataLayer3.push(items3[x].id);
                preferenceLayer3 += 1;
            }
        }