I'm using interface1.2 and jQuery1.4.
the problem is that cloned element is not draggable in IE6, but works
fine in firefox.
I defined a onDrop function in Droppable. In the onDrop function I
clone the draggable DOMElement, and append to the droppable
DOMElement. Then this cloned element is not draggable even if I call a
Draggable again. Using the IEDevToolbar, I find the cloned element has
a attribute "isDraggable" with the value "-1". After calling
removeAttr("isDraggable"), the element is draggable again!
codes:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
2 <html>
3 <head>
4 <title>test</title>
5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
6 <!--<link rel="shortcut icon" href="/favicon.ico">-->
7 <link rel="stylesheet" type="text/css" href="/css/style.css"/>
8 <script type="text/javascript" src="/js/jquery.js"></script>
9 <!--<script type="text/javascript"
src="/js/jquery/interface/interface.js"></script>-->
10 <script type="text/javascript"
src="/js/jquery/interface/source/iutil.js"></script>
11 <script type="text/javascript"
src="/js/jquery/interface/source/idrag.js"></script>
12 <script type="text/javascript"
src="/js/jquery/interface/source/idrop.js"></script>
13 <script type="text/javascript">
14 $(document).ready(init);
15 function init(){
16 $(".toDrag").Draggable({
17 ghosting: true,
18 frameClass: "frameClass",
19 revert: true
20 });
21 $(".area").each(function(){
22 var self = $(this);
23 $("<div>")
24 .css({position: "relative", width: self.css("width"),
height: self.css("height")})
25 .appendTo(this)
26 .Droppable({
27 tolerance: "pointer",
28 accept: "toDrag",
29 onHover: function(a){
30 },
31 onDrop: function(a){
32 var na = $(a);
33 if($(a).attr("moved") != "moved"){
34 na =
$(a).clone().appendTo(document.body).attr("moved", "moved")
35 }
36 na
37 .appendTo(this)
39 .removeAttr("isDraggable")// not calling
this will cause problem
40 .Draggable({
41 ghosting: true,
42 frameClass: "frameClass",
43 revert: true
44 })
45 }
46 });
47 })
48 }
49 var i = 0;
50 </script>
51 <style type="text/css">
52 .toDrag{
53 position: absolute;
54 }
55 </style>
56 </head>
57 <body>
58 <div id="menu">
59 <div class="toDrag">drag</div>
60 </div>
61 <div id="special_topic_main">
62 <div class="area" id="st_area1">
63 </div>
64 <div class="area" id="st_area2">
65 </div>
66 <div class="area" id="st_area3">
67 </div>
68 <div class="area" id="st_area4"></div>
69 <div class="area" id="st_area5"></div>
70 <div class="area" id="st_area6"></div>
71 </div>
72 </body>
73 </html>
