返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

jquery实现商品拖动选择效果代码(自写)

2020-05-23 06:20:32易采站长站整理

效果图如下：
 

主页面index.html:

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″/>
<title>Drag and drop</title>
<link rel=”stylesheet” href=”main.css”>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script>
<script src=”jquery-ui-1.9.0.custom.min.js”></script>
</head>
<body>
<div class=”container”>
<section id=”product”>
<ul class=”clear”>
<li data-id=”1″>
<a href=”#”>
<img src=”img/T14CBxXaVzXXbGir7U_013755.jpg_160x160.jpg” alt=””>
<h3><font color=”#8A2BE2″>我是第一台打印机</font></h3>
</a>
</li>
<li data-id=”2″>
<a href=”#”>
<img src=”img/T2i06FXa4aXXXXXXXX_!!1128692172.jpg_b.jpg” alt=””>
<h3><font color=”#A52A2A”>我是第二台打印机</font></h3>
</a>
</li>
<li data-id=”3″>
<a href=”#”>
<img src=”img/T2odyUXf8bXXXXXXXX_!!629457645.jpg_b.jpg” alt=””>
<h3><font color=”#DEB887″>我是第三台打印机</font></h3>
</a>
</li>
<li data-id=”4″>
<a href=”#”>
<img src=”img/T2OgebXd8cXXXXXXXX_!!441091394.jpg_b.jpg” alt=””>
<h3><font color=”#5F9EA0″>我是第四台打印机</font></h3>
</a>
</li>
<li data-id=”5″>
<a href=”#”>
<img src=”img/T2TIYaXc4aXXXXXXXX_!!684563508.png_b.jpg” alt=””>
<h3><font color=”#7FFF00″>我是第五台打印机</font></h3>
</a>
</li>
<li data-id=”6″>
<a href=”#”>
<img src=”img/T2uOlZXoRcXXXXXXXX_!!645750852.jpg_b.jpg” alt=””>
<h3><font color=”#D2691E”>我是第六台打印机</font></h3>
</a>
</li>
<li data-id=”7″>
<a href=”#”>
<img src=”img/T2WDSCXalcXXXXXXXX_!!409679289.jpg_b.jpg” alt=””>
<h3><font color=”#6495ED”>我是第七台打印机</font></h3>

相关文章 大家在看