首页 > 代码库 > 拖动 - draggable

拖动 - draggable

2024-08-29 13:44:04   223人阅读

 1 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 2 <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
 3 <%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
 4 <%
 5     String homePage = request.getContextPath();
 6 %>
 7 <!DOCTYPE HTML>
 8 <html>
 9 <head>
10     <title>Title</title>
11     <meta charset="UTF-8"/>
12     <link rel="stylesheet" type="text/css" href="<%=homePage%>/jslib/jquery-easyui-1.5/themes/default/easyui.css"
13           charset="utf-8"/>
14     <link rel="stylesheet" type="text/css" href="<%=homePage%>/jslib/jquery-easyui-1.5/themes/icon.css"
15           charset="utf-8"/>
16     <script type="text/javascript" src="<%=homePage%>/jslib/jquery-easyui-1.5/jquery.min.js" charset="utf-8"></script>
17     <script type="text/javascript" src="<%=homePage%>/jslib/jquery-easyui-1.5/jquery.easyui.min.js"
18             charset="utf-8"></script>
19     <script type="text/javascript" src="<%=homePage%>/jslib/jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"
20             charset="utf-8"></script>
21     <style type="text/css">
22         .dd-demo{
23             width:60px;
24             height:60px;
25             border:2px solid #d3d3d3;
26             position:absolute;
27         }
28         .proxy{
29             border:1px dotted #333;
30             width:60px;
31             height:60px;
32             text-align:center;
33             background:#fafafa;
34         }
35         #dd1{
36             background:#E0ECFF;
37             left:20px;
38             top:20px;
39         }
40         #dd2{
41             background:#8DB2E3;
42             left:100px;
43             top:20px;
44         }
45         #dd3{
46             background:#FBEC88;
47             left:180px;
48             top:20px;
49         }
50     </style>
51     <script type="text/javascript">
52         $(function(){
53             $(‘#dd1‘).draggable();
54 
55             $(‘#dd2‘).draggable({
56                 proxy:‘clone‘
57             });
58 
59             $(‘#dd3‘).draggable({
60                 proxy:function(source){
61                     var p = $(‘<div class="proxy">proxy</div>‘);
62                     p.appendTo(‘body‘);
63                     return p;
64                 }
65             });
66         })
67     </script>
68 </head>
69 <body>
70 <div id="dd1" class="dd-demo"></div>
71 <div id="dd2" class="dd-demo"></div>
72 <div id="dd3" class="dd-demo"></div>
73 </body>
74 </html>

对于第一个 <div> 元素，我们通过默认值让其可以拖动。

对于第二个 <div> 元素，我们通过创建一个克隆（clone）了原来元素的代理（proxy）让其可以拖动。

对于第三个<div> 元素，我们通过创建自定义代理（proxy）让其可以拖动。

拖动 - draggable


联系
我们