Javascript jQuery:draggables计数器（再次！）
以下是该帖子的后续内容： 我对编程相当陌生，所以，为一个无聊的问题道歉。 我试图计算在一个可拖放文件中拖放的元素的数量。与其将计数变量初始化为0，并在每次可拖动的药片落在可拖放区域时增加/减少计数，我尝试的是（可能）不太麻烦的策略，即尝试计算可拖放区域中药片的总数。我试过使用“.count（）”、“.length”，但没有成功。。。这是代码。有什么建议吗Javascript jQuery:draggables计数器（再次！）,javascript,jquery,html,jquery-ui,Javascript,Jquery,Html,Jquery Ui,以下是该帖子的后续内容： 我对编程相当陌生，所以，为一个无聊的问题道歉。 我试图计算在一个可拖放文件中拖放的元素的数量。与其将计数变量初始化为0，并在每次可拖动的药片落在可拖放区域时增加/减少计数，我尝试的是（可能）不太麻烦的策略，即尝试计算可拖放区域中药片的总数。我试过使用“.count（）”、“.length”，但没有成功。。。这是代码。有什么建议吗 <!DOCTYPE html> <html> <head> <title>My Pa
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.ui.touch-punch.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/bootstrap.min.js"></script>
<style>
.fish {
margin:.5em;
font-size:1.2em;
position:relative;
display:inline-block;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
border-radius: 50%;
width: 40px;
height: 40px;
background: #BAB6B2;
float: left;
border:.3em solid #4B027C ;
}
.cloth {
width: 100%;
height: 210px;
border-radius: 15px;
border: 5% solid rgba(200,0,0,.5);
background-color:white;
background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%),
linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%);
background-size:20px 20px;
}
</style>
<script type="text/javascript">
$(init);
function init() {
var j = 0;
$("#counter").find("h1").html("You keep: " + j);
$(".fish").draggable({
addClasses: true,
});
$(".cloth").droppable({
accept: ".fish",
tolerance: "fit",
drop: function( event, ui ) {
j = $(".cloth .fish").length;
$("#counter").find("h1").html("You keep: " + j);
},
out: function(){
j = $(" .cloth .fish ").length;
$("#counter").find("h1").html("You keep: " + j);
}
});
}
</script>
</head>
<body>
<div class="container">
<div id= "counter"><h1>You keep: 0</h1></div>
<div class="cloth" ></div>
<div class = "row ">
<div class="fish" ></div>
<div class="fish" ></div>
<div class="fish" ></div>
<div class="fish" ></div>
<div class="fish" ></div>
</div>
<div class ="row ">
<div class="fish" ></div>
<div class="fish" ></div>
<div class="fish" ></div>
<div class="fish" ></div>
<div class="fish" ></div>
</div>
</div>
<button type="button" class="btn btn-primary footpage" >Send!</button>
</body>
</html>
我的页面
.鱼{
边缘：.5em；
字体大小：1.2米；
位置：相对位置；
显示：内联块；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
边界半径：50%；
宽度：40px；
高度：40px；
背景：#BAB6B2；
浮动：左；
边框：.3em实心#4B027C；
}
.布{
宽度：100%；
高度：210px；
边界半径：15px；
边框：5%实心rgba（200,0,0,5）；
背景色：白色；
背景图像：线性梯度（90度，rgba（200,0,0,5）50%，透明50%），
线性梯度（rgba（200,0,0,5）50%，透明50%）；
背景尺寸：20px 20px；
}
美元（初始）；
函数init（）{
var j=0；
$（“#counter”）.find（“h1”）.html（“您保留：+j”）；
$（“.fish”）。可拖动({
addClasses：是的，
});
$（“.cloth”）。可拖放({
接受：“.鱼”，
公差：“适合”，
drop：函数（事件、用户界面）{
j=$（“.cloth.fish”）。长度；
$（“#counter”）.find（“h1”）.html（“您保留：+j”）；
},
输出：函数（）{
j=$（“.cloth.fish”）。长度；
$（“#counter”）.find（“h1”）.html（“您保留：+j”）；
}
});
}
你保持：0
发送！
$（“#可拖动”）.draggable（）；
$（“#可拖放”）。可拖放({
drop：函数（事件、用户界面）{
$（event.toElement）.addClass（“ui状态突出显示”）
.查找（“p”）
.html（“已删除！”）；
}
});
jQuery UI可拖放-默认功能
#拖拉的{
宽度：100px；
高度：100px；
填充：0.5em；
浮动：左；
保证金：10px 10px 10px 0；
}
#可降落{
宽度：150px；
高度：150像素；
填充：0.5em；
浮动：左；
利润率：10px；
}
把我拖到我的目标
到这里来
您的逻辑工作正常，但缺少一件事：您从未真正将.fish
添加到.cloth
div中。删除并不意味着将其添加到可删除的中，它意味着您可以删除该元素并获得相关事件。如果要添加它们，必须附加它们。这将意味着修改一点您的css
，并添加一些行为来处理相对定位与绝对定位。另外，out
并不意味着删除元素，它意味着它们离开了droppable
区域。因此，您也可以更换此部件。
它可能是这样的：
function init() {
var j = 0;
$("#counter").find("h1").html("You keep: " + j);
$(".fish").draggable({
addClasses: true,
refreshPositions: true,
//When you start dragging you append to body mainly to remove
// from cloth div
start: function (e, ui) {
ui.helper.appendTo('body');
},
//You move your out logic to stop. So if the element hasn't been added
// to cloth, it won't be counter
stop: function (e, ui) {
j = $(".cloth .fish").length;
$("#counter").find("h1").html("You keep: " + j);
}
});
$(".cloth").droppable({
accept: ".fish",
tolerance: "fit",
drop: function (event, ui) {
//On drop you append fish to the cloth div so it's counted
$('.cloth').append(ui.helper.css({
position: 'absolute',
top: ui.helper.offset().top,
left: ui.helper.offset().left
}));
j = $(".cloth .fish").length;
$("#counter").find("h1").html("You keep: " + j);
},
});
}
和css：
.ui-draggable-dragging {
position: absolute;
}
小提琴：
也就是说，我会参考前面的答案，使用类可能会简化整个过程。嗨，朱利安，谢谢你的详细解释。这太好了，你的建议非常有效。你好，朱利安。我注意到上面代码中有一些奇怪的地方：如果你第一次拖动一条可拖拉的鱼，你就“向上”拖动，一切都很好。但是，如果第一次拖动鱼时，将其向下拖动，并将其放置在屏幕白色区域的任何位置，则鱼会从屏幕“跳”到最底部。我正在努力解决这个问题：你知道如何解决这个问题吗？这个例子主要是为了回答你的计数问题。但你是对的，由于很多原因，它没有完全起作用。你能准确地针对你正在努力解决的问题，并用另一个问题来描述它吗。还有很多事情需要调整。嗨，朱利安，谢谢你。我已经在这里发布了新的问题和片段。嗨，Julien等人，我在后续文章中发布了一个问题的解决方案（见下面的链接）。该解决方案令人满意且简单，并且使用原生HTML5而不是jQuery。