使用 jQuery 拖放后丢失 id

Question

我发现这个网站有我需要的拖放功能，当我做拖放时元素交换了，但是有一个问题，我想用 css 个性化每个列表元素，但是当我做拖放时，我从元素中丢失了 id。有人能告诉我我可以对这个函数做什么，这样我就不会丢失 id 吗？

这是网站： http://www.authorcode.com/swap-elements-when-drag-one-onto-another-using-jquery-ui/

这是函数：

$(function() {
        $("#dragdiv li,#dropdiv li").draggable({
            appendTo: "body",
            helper: "clone",
            cursor: "move",
            revert: "invalid"
        });

        initDroppable($("#dropdiv li,#dragdiv li"));
        function initDroppable($elements) {
            $elements.droppable({
                activeClass: "ui-state-default",
                hoverClass: "ui-drop-hover",
                accept: ":not(.ui-sortable-helper)",

                over: function(event, ui) {
                    var $this = $(this);
                },
                drop: function(event, ui) {
                    var $this = $(this);
                    var li1 = $('<li>' + ui.draggable.text() + '</li>')
                    var linew1 = $(this).after(li1);

                    var li2 = $('<li>' + $(this).text() + '</li>')
                    var linew2 = $(ui.draggable).after(li2);

                    $(ui.draggable).remove();
                    $(this).remove();

                    initDroppable($("#dropdiv li,#dragdiv li"));
                    $("#dragdiv li,#dropdiv li").draggable({
                        appendTo: "body",
                        helper: "clone",
                        cursor: "move",
                        revert: "invalid"
                    });
                }
            });
        }
    });

谢谢

Answer 1

您可以从正在切换的li 中获取id 属性，并将ID 添加到正在创建的新列表项标签中（有点像它已经使用text() 所做的那样）。例如

$(function() {
  $("#dragdiv li,#dropdiv li").draggable({
    appendTo: "body",
    helper: "clone",
    cursor: "move",
    revert: "invalid"
  });

  initDroppable($("#dropdiv li,#dragdiv li"));

  function initDroppable($elements) {
    $elements.droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-drop-hover",
      accept: ":not(.ui-sortable-helper)",

      over: function(event, ui) {
        var $this = $(this);
      },
      drop: function(event, ui) {
        var $this = $(this);
        
        // get id from one being dragged
        var id1 = ui.draggable.attr("id");
        var li1 = $('<li id="' + id1 + '" >' + ui.draggable.text() + '</li>')
        var linew1 = $(this).after(li1);
        
        // get ID from the one being switched
        var id2 = $(this).attr("id");
        var li2 = $('<li id="' + id2 + '" >' + $(this).text() + '</li>')
        var linew2 = $(ui.draggable).after(li2);

        $(ui.draggable).remove();
        $(this).remove();

        initDroppable($("#dropdiv li,#dragdiv li"));
        $("#dragdiv li,#dropdiv li").draggable({
          appendTo: "body",
          helper: "clone",
          cursor: "move",
          revert: "invalid"
        });
      }
    });
  }
});

.ui-drop-hover {
  border: 2px solid #bbb;
}

#dragdiv li,
#dropdiv li {
  border: 1px solid #bbb;
}

#dropdiv li {
  padding-left: 10px;
}

#maindiv {
  width: 500px;
  height: 350px;
  border: 2px solid #bbb;
}

#allItems,
#Ul1 {
  list-style: none;
}

#dragdiv,
#dropdiv {
  width: 180px;
  height: 250px;
  float: left;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>

<div id="maindiv">
  <h3>
    <span>Swap items between lists</span></h3>
  <div id="dragdiv">

    <ul id="allItems" runat="server">
      <li id="node1">Item A</li>
      <li id="node2">Item B</li>
      <li id="node3">Item C</li>
      <li id="node4">Item D</li>
      <li id="node5">Item E</li>
      <li id="node6">Item F</li>
      <li id="node7">Item G</li>
      <li id="node8">Item H</li>
      <li id="node9">Item I</li>
    </ul>
  </div>
  <div id="dropdiv">
    <ul id="Ul1" runat="server">
      <li id="Li1">Item j</li>
      <li id="Li2">Item K</li>
      <li id="Li3">Item L</li>
      <li id="Li4">Item M</li>
      <li id="Li5">Item N</li>
      <li id="Li6">Item O</li>
      <li id="Li7">Item P</li>
      <li id="Li8">Item Q</li>
      <li id="Li9">Item R</li>
    </ul>
  </div>
</div>