上面的例子中，sum會隨著拖拽次數(shù)而增加，即使在購物車下方拖拽也會增加，怎么將代碼完善一下呢？
上面的例子中，sum會隨著拖拽次數(shù)而增加，即使在購物車下方拖拽也會增加，怎么將代碼完善一下呢？
晨影影
2017-04-17
5 回答
舉報
0/150
提交
取消
2017-10-01
已經(jīng)搞定了，大概這樣來回拖動的話變量也會隨之增加。
???<div?id="divtest"> ????????????<div?class="box2"> ????????????????<div?class="title">產(chǎn)品區(qū)</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">還沒有產(chǎn)品</div></div> ????????????</div> ????????</div>? ???????? ????????<script?type="text/javascript"> ?????????$(function(){ ????????????$(".drag").draggable();? ????????????var?i?=?0; ?????????????//當(dāng)放置到回收站時 ????????????$(".cart").droppable({? ???????????????drop:function(){ ????????????????i++; ????????????????$(this).addClass("focus").find("#tip").html(""); ????????????????$(".title?span").html(i); ???????????????? ???????????????}????????? ????????????}); ????????????//當(dāng)拖回產(chǎn)品區(qū)時 ????????????$(".box2").droppable( ??????????????drop:function(){ ????????????????i--; ????????????????$(".title?span").html(i);?? ??????????????} ????????????}) ?????????})?? ????????</script>2017-07-27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放置插件</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://idcbgp.cn/data/jquery-1.8.2.min.js"
type="text/javascript"></script>
<script src="http://idcbgp.cn/data/jquery-ui-1.9.2.min.js"
type="text/javascript"></script>
</head>
<body>
<div id="divtest">
<div class="box">
<div class="title">
產(chǎn)品區(qū)(<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">還沒有產(chǎn)品</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>
2017-07-27
水平有限只能用這種土方法
2017-06-12
?
?
我是設(shè)置了一個flag變量來記錄蘋果的拖入和拖出
2017-04-17
代碼如下：
<!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://idcbgp.cn/data/jquery-1.8.2.min.js" type="text/javascript"></script>
? ? ? ? <script src="http://idcbgp.cn/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">產(chǎn)品區(qū)</div>
? ? ? ? ? ? ? ? <div class="drag"><div>蘋果</div></div>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="box">
? ? ? ? ? ? ? ? <div class="title">回收站 (<span>0</span>)</div>
? ? ? ? ? ? ? ? <div class="cart"><div id="tip">還沒有產(chǎn)品</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>