拖放后无法访问元素

Posted 2023-05-09

【中文标题】拖放后无法访问元素

【英文标题】：Can't access element after drag and drop

【发布时间】：2021-04-08 16:09:51

【问题描述】：

我制作了一个可拖放的表格，用于对产品进行分类。

我的桌子是这样的：

<table class="table table-sortable" id="mytab">

    <tbody>

    [foreach from=$mylist item=listitem]
    [assign var="_cnt1" value=$_cnt1+1]

        <tr draggable="true" id="test_variant.[$_cnt1]">
            <td class="idcount">[$_cnt1]</td>
            <td class="[$listclass]">Productname</td>
            <input id="sortcount[$_cnt1]" class="sortcount" type="hidden" value="[$_cnt1]"/>
        </tr>

    [/foreach]
    </tbody>
</table>

我的 jQuery 看起来像这样：

$(function() 
        $('.table-sortable tbody').sortable(
            handle: 'span'
        );

    $('.table-sortable tbody').sortable().bind('sortupdate', function(e, ui) 
        function updateTable()
        var table = document.getElementById("mytab");
            for (var i = 0, row; row = table.rows[i]; i++) 
                $( row ).attr("id","test_variant."+i);
                $( row ).find(".idcount").text(i);  
                $( row ).find(".sortcount").val(i+10);
            
        
        setTimeout(updateTable, 100);
    );
);

问题是，在我拖放我的项目后，dom 或其他东西不再存在。

就像我的系统不会保存拖放的条目（但其他已更新但未拖动的条目）。

是什么导致我来到这里，因为我不明白是当我拖动一个项目并尝试像这样访问它时

document.getElementById("sortcount1").value = "200";

它只是说

Uncaught TypeError: Cannot set property 'value' of null like it's not existing

我没有问题访问其他项目。

当我通过单击 chrome devtools 中的元素打开 dom 时，然后返回控制台并再次尝试它再次工作，就像它需要初始化或其他东西一样。

希望有人能给我一个提示。

谢谢！

【问题讨论】：

您的for() 循环看起来定义不正确。我没有看到 For 循环中定义的条件。

你能拖放你的物品吗？工作小提琴检查this

嘿，我可以拖放我的项目，但我无法保存我的更新，因为被拖放的更新就像不存在一样

【参考方案1】：

您可以考虑以下示例。

$(function() 
  function updateTable(e, ui) 
    var t = $(e.target).closest("table");
    $("tbody tr", t).each(function(i, el) 
      $(el).attr("id", "test_variant." + i);
      $(".idcount", el).html(i);
      $(".sortcount", el).val(i + 10);
    );
  

  $('.table-sortable tbody').sortable(
    handle: 'span',
    update: updateTable
  );
);

这将在排序更新后重置表中的项目。

更新

$(function() 
  function updateTable(e, ui) 
    var t = $(e.target).closest("table");
    $("tbody tr", t).each(function(i, el) 
      var c = i + 1;
      $(el).attr("id", "test_variant." + c);
      $(".idcount", el).html(c);
      $(".sortcount", el).val(c + 10);
    );
  

  $('.table-sortable tbody').sortable(
    handle: 'span',
    items: "> tr",
    update: updateTable
  );
);

table 
  width: 340px;


table tr 
  margin: 0 3px 3px 3px;
  padding: 0.4em;
  padding-left: 1.5em;
  font-size: 1.4em;
  height: 18px;

<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>

<table class="table-sortable">
  <thead>
    <tr>
      <td>&nbsp;</td>
      <td>ID</td>
      <td>Product Name</td>
    </tr>
  </thead>
  <tbody>
    <tr id="test_variant.1">
      <td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></td>
      <td class="idcount">1</td>
      <td class="products">Item Name 1
        <input id="sortcount-1" class="sortcount" type="hidden" value="11" />
      </td>
    </tr>
    <tr id="test_variant.2">
      <td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></td>
      <td class="idcount">2</td>
      <td class="products">Item Name 2
        <input id="sortcount-2" class="sortcount" type="hidden" value="12" />
      </td>
    </tr>
    <tr id="test_variant.3">
      <td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></td>
      <td class="idcount">3</td>
      <td class="products">Item Name 3
        <input id="sortcount-3" class="sortcount" type="hidden" value="13" />
      </td>
    </tr>
    <tr id="test_variant.4">
      <td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></td>
      <td class="idcount">4</td>
      <td class="products">Item Name 4
        <input id="sortcount-4" class="sortcount" type="hidden" value="14" />
      </td>
    </tr>
    <tr id="test_variant.5">
      <td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></td>
      <td class="idcount">5</td>
      <td class="products">Item Name 5
        <input id="sortcount-5" class="sortcount" type="hidden" value="15" />
      </td>
    </tr>
  </tbody>
</table>

测试了代码，它似乎可以正常工作。

【讨论】：

嘿谢谢你的回答我试过了，但我没有工作。更新没有触发。我试过 $('.table-sortable tbody').on('sortupdate',function());这是开火。但我无法让 updateTable 函数工作，它说“目标”未定义。

对不起，我用了这个github.com/psfpro/bootstrap-html5sortable而不是jquery ui。现在我使用 jquery ui，你的代码可以工作，但不能解决我的问题......它仍然是相同的行为