实现可拖放的购物车

来源：互联网发布：监控电脑软件编辑：程序博客网时间：2024/04/29 23:32
<!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>
0 0