上面的例子中，sum会随着拖拽次数而增加，即使在购物车下方拖拽也会增加，怎么将代码完善一下呢？
上面的例子中，sum会随着拖拽次数而增加，即使在购物车下方拖拽也会增加，怎么将代码完善一下呢？
晨影影
2017-04-17
5 回答
已经搞定了，大概这样来回拖动的话变量也会随之增加。
<div id="divtest">
<div class="box2">
<div class="title">产品区</div>
<div class="drag"><div>苹果</div></div>
<div class="drag"><div>苹果</div></div>
</div>
<div class="box">
<div class="title">回收站(<span>0</span>)</div>
<div class="cart"><div id="tip">还没有产品</div></div>
</div>
</div>
<script type="text/javascript">
$(function(){
$(".drag").draggable();
var i = 0;
//当放置到回收站时
$(".cart").droppable({
drop:function(){
i++;
$(this).addClass("focus").find("#tip").html("");
$(".title span").html(i);
}
});
//当拖回产品区时
$(".box2").droppable(
drop:function(){
i--;
$(".title span").html(i);
}
})
})
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放置插件</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://www.imooc.com/data/jquery-1.8.2.min.js"
type="text/javascript"></script>
<script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js"
type="text/javascript"></script>
</head>
<body>
<div id="divtest">
<div class="box">
<div class="title">
产品区(<span id="product"></span>)
</div>
<div id="box1">
<div class="drag">
<div>苹果</div>
</div>
</div>
</div>
<div class="box">
<div class="title">
回收站(<span id="collect"></span>)
</div>
<div class="cart">
<div id="tip">还没有产品</div>
</div>
</div>
</div>
<script type="text/javascript">
var intSum1 = $("#box1").children().length;
var intSum2 = 0;
$("#product").html(intSum1);
$("#collect").html(intSum2);
$(function() {
$(".drag").draggable();
$("#box1").droppable({
drop : function() {
console.log("intSum1:"+intSum1+",intSum2:"+intSum2)
intSum1++;
intSum2--;
$(this).addClass("focus").find("#tip").html("");
$("#product").html(intSum1);
$("#collect").html(intSum2);
}
})
$(".cart").droppable({
drop : function() {
console.log("intSum1:"+intSum1+",intSum2:"+intSum2)
intSum1--;
intSum2++;
$(this).addClass("focus").find("#tip").html("");
$("#product").html(intSum1);
$("#collect").html(intSum2);
}
})
});
</script>
</body>
</html>
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
<title>放置插件</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
<style type="text/css">
#divtest
{
width: 282px;
}
.box
{
width: 280px;
border: solid 1px #eee;
margin: 10px 0px;
}
.box .title
{
padding: 8px;
background-color: Blue;
color: #fff;
height: 23px;
line-height: 23px;
font-size: 15px;
font-weight: bold;
}
.box .drag
{
padding: 5px;
cursor: move;
}
.box .drag div
{
border: solid 1px #fff;
background-color: red;
color:#fff;
cursor: move;
width: 35px;
padding: 20px;
text-align: center;
}
.box .cart
{
padding: 5px;
cursor: move;
}
.box .cart div
{
padding: 5px;
height: 55px;
text-align:center;
}
.focus
{
background-color: #eee;
}
</style>
</head>
<body>
<div id="divtest">
<div class="box">
<div class="title">产品区</div>
<div class="drag"><div>苹果</div></div>
</div>
<div class="box">
<div class="title">回收站 (<span>0</span>)</div>
<div class="cart"><div id="tip">还没有产品</div></div>
</div>
</div>
<script type="text/javascript">
$(function () {
var i=0;
$(".drag").draggable();
$(".cart").droppable({
drop: function () {
i++;
$("span").html(i);
$(this)
.addClass('focus')
.find('#tip').html('');
}
})
});
</script>
</body>
</html>
举报
0/150
提交
取消
