将 <li> 附加到 <ul> 但不能成为可拖动的 jQuery [重复]答案

【问题标题】：Appending <li> to a <ul> but not becoming draggable jQuery [duplicate]将 <li> 附加到 <ul> 但不能成为可拖动的 jQuery [重复]
【发布时间】：2018-11-10 22:06:58
【问题描述】：

我试图让用户建立一个运动列表，然后将该运动列表项列表拖到“购物车”中。但是任何附加的列表项都不会变得可拖动，我不太确定为什么或如何使它们如此。占位符列表项可以拖动，但不能拖动任何附加项。

/* JS code for sports.html */


$(function () {
    // initialization code when DOM is ready

    //hides the second step
    $('#step2').hide();

    //tooltips
    $('#addSport').tooltip();

    //array of the auto completed sports
    var tags = ["archery", "badminton", "baseball", "softball", "football", "soccer", "volleyball", "basketball", "golf", "hockey", "swimming", "running", "track and field", "gymnastics", "dance", "rowing", "tennis", "wrestling", "weightlifting", "karate", "lacrosse", "cricket", "polo", "skating", "shooting", "handball", "fencing", "cycling", "boxing", "cheerleading", "surfing", "snowboarding", "dodgeball", "jujutso", "sumo", "taekwondo", "paintball", "pocket billiards", "pool", "fishing", "skiing", "sailing", "luge", "bobsleigh", "racquetball"];
    $("#sportName").autocomplete({
        source: function (request, response) {
            var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
            response($.grep(tags, function (item) {
                return matcher.test(item);
            }));
        }
    });

    var sportClick = 0;
    $("#addSport").click(function () {
        sportClick++;
        var sport;
        sport = $("#sportName").val();
        
        //takes the first sport and replaces the holding text
        if (sportClick === 1) {
            $("#sportList").html('<li>' + sport + '</li>');
            //$("#sportList").html(sport + '<br>');
        } 
        //any other sports will be added to the first
        else {
            $("#sportList").append('<li>' + sport + '</li>');
            //$("#sportList").append(sport + '<br>');
        }
    });

    //allows the sport items become draggable
    $("#sportList li").draggable({
        helper: "clone"
    }).css("cursor", "pointer");

    $("#step2Btn").click(function () {
        $('#step2').show();
    });

    //allows the sport items to be dropped into the cart
    $("#cart").droppable({
        tolerance: "intersect",
        drop: function (evt, ui) {
            var obj;
            $("#cart").css("height", "auto");
            obj = ui.draggable;
            console.log("dropped!");
            $("#cart").append("<li>" + obj.html() +
                " (<a href='dummy.html' class='remove'>Remove</a>)" +
                "</li>");
        }
    });

    //able to remove a sport item
    $("#cart").on("click", "a.remove", function () {
        console.log("Remove element!");
        $(this).parent().remove();
        return false;
    });

    getCart = function () {
        var cartList, el, group1;
        cartList = [];
        $("#cart li").each(function () {
            el = $(this).html();
            console.log("Matching element " + el);
            group1 = el.match(/^(.+) \(<a href/)[1]
            console.log("Match with reg exp: " + group1);
            cartList.push(group1);
        })
        return cartList;
    }
});

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Sports</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="code.js"></script>

    <style type="text/css">
        #cart {
            border: 2px solid black;
            background-color: lightgray;
            height: 100px;
            width: 300px;
            padding-top: 10px;
            padding-bottom: 10px;
        }
    </style>
</head>

<body>

    <h1>Sports Select</h1>

    <h2>Step 1: Enter in as many sports that you can think of</h2>
    <p>
        <label><strong>Sport Name: </strong></label>
        <input type="text" size="15" id="sportName" onfocus="this.value=''" title="Enter a sport name">
        <input type="button" id="addSport" value="Add Sport" title="Click to add a sport" />
    </p>

    <h2>Sports List</h2>
    <ul id="sportList">
        <li>All entered sports will be entered here.</li>
    </ul><br>

    <label><strong>Click to start step 2: </strong></label><br>
    <input type="button" id="step2Btn" value="Step 2" title="Click to show step two" />


    <h2 id="step2">Step 2: Drag all the sports that you've played into the box</h2>
    <br>


    <h2>Cart</h2>
    <ul id="cart">

    </ul>

</body>

</html>

【问题讨论】：

您还必须使新元素可拖动。这是stackoverflow.com/questions/18789354/…
@jesusnoseq 是的，我刚刚意识到这一点。我刚刚发布了我如何解决我的具体问题的答案。感谢您的提示！

标签： javascript jquery html jquery-ui-draggable

【解决方案1】：

对于我的具体情况，我所做的只是将 draggable() sn-p 放入 #addSport 按钮，然后将可拖动条件添加到所有新添加的列表项中

var sportClick = 0;
var sportItem;
$("#addSport").click(function () {
    sportClick++;
    var sport;
    sport = $("#sportName").val();
    sportItem = '<li>' + sport + '</li>';


    //takes the first sport and replaces the holding text
    if (sportClick === 1) {
        $("#sportList").html(sportItem);
        //$("#sportList").html(sport + '<br>');
    }
    //any other sports will be added to the first
    else {
        $("#sportList").append(sportItem);
        //$("#sportList").append(sport + '<br>');
    }

    //allows the sport items become draggable
    $("#sportList li").draggable({
        helper: "clone"
    }).css("cursor", "pointer");

    $("#step2Btn").click(function () {
        $('#step2').show();
    });
});

【讨论】：