Question

我正在尝试让用户构建一个体育列表，然后将该体育列表项列表拖入“购物车”。但是任何附加的列表项都不会变得可拖动，我不太清楚为什么或如何制作它们。可以拖动占位符列表项，但不能拖动任何附加列表项。

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

1 个答案: