我试图让用户建立一个运动列表，然后将该运动列表项列表拖到"购物车"中。但是任何附加的列表项都无法拖动，我不太确定为什么或如何使它们如此。 可以拖动占位符列表项，但不能拖动任何追加的列表项。
/* 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>对于我的具体情况，我所做的只是将 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();
});
});