使用 jQuery 上下文菜单在列表之间移动项目 - 完成后附加到新事件

Question

我有 2 个列表，A 和 B。我使用上下文菜单（右键单击菜单）将项目移动到另一个列表，但是当我右键单击该项目时，它使用的是其原始数据类.我该如何实现？

我需要将项目附加到新列表吗？如何操作？

当我右键单击任务头区域时，会显示菜单。如果我在列表 A 中选择一个项目，它会按预期正确移动到列表 B，但如果我现在右键单击列表 B 中的相同项目，它会显示 'Move to list B'。控制台日志似乎显示此项已更新，但结果是错误的。

jQuery(document).ready(function($) {
  let menu = $('.context_menu');

  document.addEventListener("click", function(e) {
    if (e.target.closest('.context_menu'))
      return;
    menu.css('opacity', 0);
  });

  $(".a .task-head, .b .task-head").contextmenu(function(e) {
    e.preventDefault();
    let li = $(this).closest("li");
    console.debug(li);
    let id = li.data("id");
    let type = li.data("type");
    let html = "";
    if (type === "a") {
      html = "Move to List B";
    } else {
      html = "Move to List A";
    }
    alert(type);
    alert(html);

    $("#move").html(html).attr("data-id", id).attr("data-type", type);

    menu.css('position', 'absolute');
    menu.css('left', e.pageX + 'px');
    menu.css('top', e.pageY + 'px');
    menu.css('opacity', 1);
  });

  $("#move").click(function(e) {
    e.preventDefault();
    console.debug($(this));
    let id = $(this).data("id");
    let type = $(this).data("type");
    let date = $(this).data("date");
    let li = $('#' + type + '-' + id);

    if (type === "b") {
      li.removeClass("b");
      li.addClass("a");
      li.attr("data-type", "a");
      li.appendTo($("#list-a"));
      li.attr("data-id", id);
      li.attr('id', 'a-' + id);
      $('.context_menu').css('opacity', 0);
    } else if (type === "a") {
      li.removeClass("a");
      li.addClass("b");
      li.attr("data-type", "b");
      li.appendTo($("#list-b"));
      li.attr("data-id", id);
      li.attr('id', 'b-' + id);
      $('.context_menu').css('opacity', 0);
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.js"></script>
<script src="//code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<ol id="list-a">
  <li id="a-1" class="card a ui-front" data-type="a" data-id="1">
    <span class="task-head">Item 1</span>
    <div class="description">
      <p>This is item 1</p>
    </div>
  </li>
  <li id="a-2" class="card a ui-front" data-type="a" data-id="2">
    <span class="task-head">Item 2</span>
    <div class="description">
      <p>This is item 2</p>
    </div>
  </li>
</ol>
<ol id="list-b">
  <li id="b-3" class="card b ui-front" data-type="b" data-id="3">
    <span class="task-head">Item 3</span>
    <div class="description">
      <p>This is item 3</p>
    </div>
  </li>
  <li id="b-4" class="card b ui-front" data-type="a" data-id="4">
    <span class="task-head">Item 4</span>
    <div class="description">
      <p>This is item 4</p>
    </div>
  </li>
  <li id="b-5" class="card b ui-front" data-type="a" data-id="5">
    <span class="task-head">Item 5</span>
    <div class="description">
      <p>This is item 5</p>
    </div>
  </li>
</ol>
<div class="context_menu ui-front absolute mt-2 w-48 rounded-md shadow-lg origin-top-right right-0">
  <div class="rounded-md ring-1 ring-black ring-opacity-5 py-1 bg-white">
    <div id="context_menu_title" class="block px-4 py-2 text-xs text-gray-400">
      List Item Menu
    </div>
    <a id="move" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition" href="#" data-id="0" data-type="none">Move it!</a>
  </div>

Answer 1

问题是这样的：let type = li.data("type");

是的，它第一次工作，但即使您用新值更新 data-type，它仍将获得原始值。使用 let type = li.attr("data-type");

注意，修复这多个地方

演示

jQuery(document).ready(function($) {
  let menu = $('.context_menu');

  document.addEventListener("click", function(e) {
    if (e.target.closest('.context_menu'))
      return;
    menu.css('opacity', 0);
  });

  $(".a .task-head, .b .task-head").contextmenu(function(e) {
    e.preventDefault();
    let li = $(this).closest("li");
    console.debug(li);
    let id = li.data("id");
    let type = li.attr("data-type");
    let html = "";
    if (type == "a") {
      html = "Move to List B";
    } else {
      html = "Move to List A";
    }

    $("#move").html(html).attr("data-id", id).attr("data-type", type);

    menu.css('position', 'absolute');
    menu.css('left', e.pageX + 'px');
    menu.css('top', e.pageY + 'px');
    menu.css('opacity', 1);
  });

  $("#move").click(function(e) {
    e.preventDefault();
    let id = $(this).data("id");
    let type = $(this).attr("data-type");
    let date = $(this).data("date");

    let li = $('#' + type + '-' + id);
    if (type === "b") {
      li.removeClass("b");
      li.addClass("a");
      li.attr("data-type", "a");
      li.appendTo($("#list-a"));
      li.attr("data-id", id);
      li.attr('id', 'a-' + id);

      $('.context_menu').css('opacity', 0);

    } else if (type === "a") {
      li.removeClass("a");
      li.addClass("b");
      li.attr("data-type", "b");
      li.appendTo($("#list-b"));
      li.attr("data-id", id);
      li.attr('id', 'b-' + id);
      $('.context_menu').css('opacity', 0);

    }

  });

});

<!DOCTYPE html>
<html class="light" lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>list example</title>
  <link rel="stylesheet" href="/css/list.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
  <script src="//code.jquery.com/jquery-3.6.0.js"></script>
  <script src="//code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
  <script src="/js/list.css"></script>
</head>

<body>
  <ol id="list-a">
    <li id="a-1" class="card a ui-front" data-type="a" data-id="1">
      <span class="task-head">Item 1</span>
      <div class="description">
        <p>This is item 1</p>
      </div>
    </li>
    <li id="a-2" class="card a ui-front" data-type="a" data-id="2">
      <span class="task-head">Item 2</span>
      <div class="description">
        <p>This is item 2</p>
      </div>
    </li>
  </ol>
  <ol id="list-b">
    <li id="b-3" class="card b ui-front" data-type="b" data-id="3">
      <span class="task-head">Item 3</span>
      <div class="description">
        <p>This is item 3</p>
      </div>
    </li>
    <li id="b-4" class="card b ui-front" data-type="a" data-id="4">
      <span class="task-head">Item 4</span>
      <div class="description">
        <p>This is item 4</p>
      </div>
    </li>
    <li id="b-5" class="card b ui-front" data-type="a" data-id="5">
      <span class="task-head">Item 5</span>
      <div class="description">
        <p>This is item 5</p>
      </div>
    </li>
  </ol>
  <div class="context_menu ui-front absolute mt-2 w-48 rounded-md shadow-lg origin-top-right right-0">
    <div class="rounded-md ring-1 ring-black ring-opacity-5 py-1 bg-white">
      <div id="context_menu_title" class="block px-4 py-2 text-xs text-gray-400">
        List Item Menu
      </div>
      <a id="move" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition" href="#" data-id="0" data-type="none">
                Move it!
            </a>
    </div>

</body>

</html>

使用 jQuery 上下文菜单在列表之间移动项目 - 完成后附加到新事件

Using jQuery contextmenu to move items between lists - attach to new event after finished

javascript

jquery

jquery-ui

jquery-ui-contextmenu