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

您可以从id的切换中获取li属性，并将ID添加到正在创建的新列表项标签中（有点像{{1} }。例如

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

使用jQuery拖放后丢失ID

1 个答案: