拖拽购物车

最新推荐文章于 2025-04-06 18:23:59 发布

netzmj

最新推荐文章于 2025-04-06 18:23:59 发布

阅读量1.5k

点赞数

文章标签： function div ui

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/netzmj/article/details/7381044

版权

本文介绍了一个使用jQuery UI实现的商品信息拖拽到购物车的功能示例。通过将商品列表中的项目拖放到指定区域来模拟购物体验。该示例利用了jQuery UI提供的多种组件，如Accordion折叠面板、Draggable拖拽和Droppable放置功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="js/Jquery1.7.js" type="text/javascript"></script>

<script src="js/jquery.ui.core.js" type="text/javascript"></script>

<script src="js/jquery.ui.widget.js" type="text/javascript"></script>

<script src="js/jquery.ui.mouse.js" type="text/javascript"></script>

<script src="js/jquery.ui.draggable.js" type="text/javascript"></script>

<script src="js/jquery.ui.droppable.js" type="text/javascript"></script>

<script src="js/jquery.ui.sortable.js" type="text/javascript"></script>

<script src="js/jquery.ui.accordion.js" type="text/javascript"></script>

<style type="text/css">

body{font-size: 30px;}

#left{width: 300px;height: 400px;float: left;border: 1px solid #666;}

#logo1{width: 300px;height: 30px;float: left;background-color: #ccc;}

#right{width: 300px;height: 270px;float: left;border: 1px solid #666;margin-left: 50px;}

#logo2{ width: 300px;height: 30px;float: left;background-color: #ccc;}

#content{width: 250px;height: 200px;float: left;border: 1px solid #ccc;margin-left: 25px;margin-top: 20px;}

ul{font-size: 12px;margin: 0px;}

ul li

{list-style-type: none;font-size: 12px;}

a{font-size: 12px;}

.hoverclass{width: 250px;height: 200px;border: solid 1px #ccc;background-color: Lime;}

</style>

<script type="text/javascript">

$(function () {

$('#products').accordion();

$('#products li').draggable({

helper: "clone"

});

$('#content').droppable({

activeClass: 'hoverclass',

drop: function (event, ui) {

$(this).find(".placeholder").remove();

$("<li></li>").text(ui.draggable.text()).appendTo(this);

}

})

})

</script>

</head>

<body>

<div id="left">

<div id="logo1">

<b>商¦¨¬品¡¤展1示º?</b></div>

<div id="products">

<h3>

<a href="#">女?士º?服¤t装Á¡ã</a></h3>

<div>

<ul>

<li>连¢?衣°?裙¨1</li>

<li>针?织¡¥毛?衣°?</li>

<li>休Y闲D裤?</li>

</ul>

</div>

<h3>

<a href="#">鞋?包ã¨¹配?饰º?</a></h3>

<div>

<ul>

<li>项?链¢¡ä</li>

<li>戒?指?</li>

<li>手º?链¢¡ä</li>

</ul>

</div>

<h3>

<a href="#">美¨¤容¨Y美¨¤妆Á¡À</a></h3>

<div>

<ul>

<li>爽?肤¤?水?</li>

<li>睫T毛?膏¨¤</li>

<li>眼?线?夜°1</li>

</ul>

</div>

</div>

</div>

<div id="right">

<div id="logo2">

<b>购o物?车¦Ì</b></div>

<div id="content" style="font-size:12px;">

</div>

</div>

</body>

</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。