放置插件——droppable
除使用draggable插件拖曳任意元素外，還可以調(diào)用droppable UI插件將拖曳后的任意元素放置在指定區(qū)域中，類似購(gòu)物車效果，調(diào)用格式如下：
$(selector).droppable({options})
selector參數(shù)為接收拖曳元素，options為方法的配置對(duì)象，在對(duì)象中，drop函數(shù)表示當(dāng)被接收的拖曳元素完全進(jìn)入接收元素的容器時(shí)，觸發(fā)該函數(shù)的調(diào)用。
例如，在頁(yè)面中，通過(guò)調(diào)用droppable插件將“產(chǎn)品區(qū)”中的元素拖曳至“購(gòu)物車”中，同時(shí)改變“購(gòu)物車”的背景色和數(shù)量值，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，先調(diào)用draggable插件任意拖曳“產(chǎn)品區(qū)”的元素，然后，調(diào)用droppable插件綁定“購(gòu)物車”中接收元素，當(dāng)“產(chǎn)品區(qū)”元素完全拖曳至“購(gòu)物車”時(shí)，觸發(fā)定義的drop函數(shù)，改變“購(gòu)物車”中背景色和總數(shù)量值。
任務(wù)
我來(lái)試試，親自將產(chǎn)品區(qū)中的元素拖曳至回收站中
在下列代碼的第27、28、29行代碼中，構(gòu)建定義的drop函數(shù)代碼，改變“回收站”元素的背景色和顯示的內(nèi)容。
- ?不會(huì)了怎么辦
-
- 首先，通過(guò)
$(this)方式獲取“回收站”元素本身，其次，通過(guò)元素本身的addClass()方法添加新背景樣式。
- 在改變“回收站”元素背景的同時(shí)，使用
find()方法獲取顯示內(nèi)容元素，并將它顯示的內(nèi)容設(shè)置為空。
<!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>
<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ū)</div>
<div class="drag"><div>蘋果</div></div>
</div>
<div class="box">
<div class="title">回收站</div>
<div class="cart"><div id="tip">還沒(méi)有產(chǎn)品</div></div>
</div>
</div>
<script type="text/javascript">
$(function () {
$(".drag").draggable();
$(".cart").droppable({
drop: function () {
?
?
?
}
})
});
</script>
</body>
</html>
#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;
}
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
