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>