JQuery UI实现的拖拽

最新推荐文章于 2021-09-14 19:05:37 发布

weixin_30325487

最新推荐文章于 2021-09-14 19:05:37 发布

阅读量83

点赞数

文章标签： ui xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/wang1537/archive/2012/10/08/2715155.html

版权

 1 <%--
 2   Created by IntelliJ IDEA.
 3   User: wangchao
 4   Date: 12-10-8
 5   Time: 上午10:12
 6 --%>
 7 <%@ page contentType="text/html;charset=GBK" language="java" %>
 8 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 9 <html xmlns="http://www.w3.org/1999/xhtml">
10 <head>
11     <title>可拖动层</title>
12     <script type="text/javascript" src="/js/jquery-1.5.2.js"></script>
13     <script type="text/javascript" src="/js/jquery/jquery-ui.custom.min.js"></script>
14     <link type="text/css" href="/css/jquery/jquery-ui.css"/>
15     <style type="text/css">
16         body{font-size: 13px}
17         #divFrame{width: 1000px}
18         .divBig{float: left;border: solid 1px #666;width: 200px;height: 500px;margin: 20px}
19         .divDrag{border: solid 2px #375b91;width:170px; cursor: move;padding: 5px;margin: 5px}
20 
21         .divTitle{background-color: #ccc;padding: 5px}
22         .divGet{background-color: #abcefe;}
23     </style>
24     <script type="text/javascript">
25         $(document).ready(function(){
26             //以透明度0.35随意拖动
27             $(".divDrag").draggable({ opacity:0.35});
28             $(".divBig").droppable({
29                 drop:function(){
30                     $(this).addClass("divGet");       //改变购物车的CSS
31                 }
32             });
33         });
34     </script>
35 </head>
36 <body>
37     <div id="divFrame">
38 
39         <div class="divBig">
40             <div class="divTitle">方框1</div>
41             <div class="divDrag">移动</div>
42             <div class="divDrag">联通</div>
43         </div>
44 
45         <div class="divBig">
46             <div class="divTitle">方框2</div>
47         </div>
48 
49     </div>
50 </body>
51 </html>

调用了三个文件，jquery-1.5.2.js, jquery-ui.custom.min.js, jquery/jquery-ui.css

只是简单的实现了拖拽，至于其他比如排序等一些效果后续实现

转载于:https://www.cnblogs.com/wang1537/archive/2012/10/08/2715155.html

weixin_30325487

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery UI实现的拖拽

1 <%-- 2 Created by IntelliJ IDEA. 3 User: wangchao 4 Date: 12-10-8 5 Time: 上午10:12 6 --%> 7 <%@ page contentType="text/html;charset=GBK" language="java" %> 8...
复制链接

扫一扫