jQuery：draggables的计数器（再次！） [英] jQuery: Counter for draggables (again!)
问题描述
这是帖子的后续内容：
我对编程非常陌生，为一个沉闷的问题道歉。
我试图计算掉落在一个droppable中的可拖动元素的数量。不是将计数变量初始化为0并且每次可拖动区域中的可拖动下降时增加/减少计数，我尝试（可能）不那么麻烦的策略尝试计算droppable中的药丸总数。我试过.count（），。length但没有成功......这是代码。有什么建议吗？
I'm rather new to programming so, apologies for a dull question. I am trying to count the number of draggable elements dropped in a a droppable. Rather than initialising a count variable at 0 and the increase/decrease the count each time a draggable drops in the droppable area, I am trying the (potentially) less troublesome strategy of try counting the total number of pills in the droppable. I've tried with ".count()", ".length" but no success... Here is the code. Any suggestions?
<!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>
推荐答案
你的逻辑有效，但有一件事缺失：你'实际上从未将 .fish 添加到 .cloth div。删除并不意味着它已添加到 droppable ，这意味着您可以删除该元素并获取相关事件。如果要添加它们，则必须附加它们。这将意味着修改你的 css ，并添加一些行为来处理相对定位与绝对。此外 out 并不意味着您删除元素，这意味着它们会退出 droppable 区域。所以你也可以更换这个部分。
它可能如下所示：
Your logic works, but there's one thing missing: you're never actually adding the .fish to the .cloth div. Dropping doesn't mean it's added to the droppable, it means that you can drop on that element and get the events related. If you want to add them you have to append them. This will mean modifying a bit your css and adding some behavior to deal with relative positioning vs absolute. And also out doesn't mean you remove the elements, it means they go out of the droppable region. So you can replace this part also.
It could look like this:
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;
}
小提琴： https://jsfiddle.net/nL3axfd2/8/
那说，我会先前看一下回答，使用类可能会简化这一切。
That said, I'd look into previous answer, working with classes might simplify a lot this whole thing.
这篇关于jQuery：draggables的计数器（再次！）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
