实现可拖放的购物车

最新推荐文章于 2020-03-18 10:32:02 发布

colorsunlight_110

最新推荐文章于 2020-03-18 10:32:02 发布

阅读量686

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/colorsunlight/article/details/44679973

版权

jQuery 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../public/js/jquery-1.8.3.js"></script>
<script src="../public/js/jquery-ui-1.10.4.custom.js"></script>
<script src="../public/js/jquery-ui.js"></script>
<link rel="style/css" href="../public/css/jquery-ui.css" >
<title></title>
<style type="text/css">
.draggable{width: 150px;height: 150px;background-color: #990}
#contain{margin-left:20px;margin-bottom:20px; width:200px;height:200px;background-color: blue;}
#parent{margin-left:20px;margin-bottom:20px; width:500px;height:500px;background-color:red;}
.main{width:800px;height:400px;border:1px solid;margin: 0px;padding: 50px 20px;}
.left{width:500px;height:300px;float: left;}
.right{width:200px;height: 300px;border: 1px solid;float: right;}
.left div {
    width: 98%;
    height:30px;
    background-color: #fef;
    margin: 5px 0;
}
#th {
    width: 98%;
    height:30px;
    background-color: #fef;
    margin: 5px 0;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
    $("#catalog").accordion();  //让div可以折叠显示
    $("#catalog li").draggable({
        appendTo:"body",
        helper:"clone",
        cusor:"move"
    });
    $("#cart ol").droppable({  //设置放置的容器
        activeClass:"ui-state-default",
        hoverClass:"ui-state-hover",
        accept:"li",
        drop:function(event,ui){
            //ui.draggable.text();  //获取当前拖动元素的内容
            //将拖动的元素添加到ol标签下新建的li标签中
            $("<li></li>").text(ui.draggable.text()).appendTo(this);
        }
    }).sortable({
        items:"ol li",  //获取购物车所有li元素列表
        sort:function(){  //对列表进行排序
            $(this).removeClass("ui-state-default");
        }
    })
});
</script>
</head>
<body>
<div id="main" class="main">
    <div class="left">
        <div><span style="font-size:30px;">产品列表</span></div>
        <div id="catalog" style="height: 100px;">
            <span>包包</span>
            <ul >
                <li>蓝色包包</li>
                <li>黑色包包</li>
                <li>绿色包包</li>
            </ul>
        </div>
        <div><span>小配件</span></div>
    </div>
    <div class="right">
        <div id="th"><span style="font-size:30px;">购物车</span></div>
        <div id="cart" style="height: 100%;">
            <ol style="height: 100%;">
                <li>男士T恤</li>
                <li>女士T恤</li>
            </ol>
        </div>
    </div>
</div>
</body>
</html>

colorsunlight_110

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实现可拖放的购物车

<!DOCTYPE html><html><head><meta charset="UTF-8"><script src="../public/js/jquery-1.8.3.js"></script><script src="../public/js/jquery-ui-1.10.4.custom.js"></script><script src="../public/js/jquer
复制链接

扫一扫

专栏目录