将 <li> 附加到 <ul> 但不能拖动 jQuery

Question

我正在尝试让用户构建一个运动列表，然后将该运动列表项目列表拖到 "cart" 中。但是任何附加的列表项都不会变得可拖动，我不太确定为什么或如何使它们成为可拖动的。可以拖动占位符列表项，但不能拖动任何附加项。

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

Answer 1

对于我的具体情况，我所做的只是将 draggable() 片段放入 #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();
    });
});

将 <li> 附加到 <ul> 但不能拖动 jQuery

Appending <li> to a <ul> but not becoming draggable jQuery

html

javascript

jquery

jquery-ui-draggable