上面的例子中，sum会随着拖拽次数而增加，即使在购物车下方拖拽也会增加，怎么将代码完善一下呢？
晨影影
2017-04-17 11:19
上面的例子中，sum会随着拖拽次数而增加，即使在购物车下方拖拽也会增加，怎么将代码完善一下呢？
5回答
-
- 淡水狗
- 2017-10-01 16:45:53
已经搞定了，大概这样来回拖动的话变量也会随之增加。
<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> -
- qq_与陌Dance_0
- 2017-07-27 12:31:02
<!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>
-
- qq_与陌Dance_0
- 2017-07-27 12:30:18
水平有限只能用这种土方法
-
- qq_BlackDatura_0
- 2017-06-12 16:15:43
我是设置了一个flag变量来记录苹果的拖入和拖出
-
- 晨影影
- 2017-04-17 11:20:48
代码如下：
<!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>
jQuery基础(五)一Ajax应用与常用插件
69100 学习 · 400 问题
相似问题