Hi There,
I'm getting a weird error when I try to use this script ui.mouse.js in
my page. The drag and drop functionality seems to be working fine it's
just generating an error. Can someone tell me what i'm missing to
initialize this?
!-- error from firebug
$.ui[module] has no properties
add("droppable", "activeClass", Object)
ui.mouse.js (line 10)
(no name)(function())
ui.droppable.ext.... (line 10)
[Break on this error]
var proto = $.ui[module].prototype;
!----- html code
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
<style type="text/css">
.block
{
border: 2px solid #0090DF;
background-color: #68BFEF;
width: 170px;
height: 100px;
margin: 5px;
overflow: hidden;
padding: 0 0 0 0;
z-index: 9999;
cursor: move;
}
.imageItem
{
border: 2px solid #0090DF;
background-color: yellow;
}
.mouseOverClass
{
background-color: Yellow;
}
.drop
{
background-color: #e9b96e;
border: 3px double #c17d11;
width: 300px;
height: 800px;
margin: 10px;
overflow: auto;
position: absolute;
top: 70px;
right: 10%;
padding: 0 0 0 0;
}
.droppable-active
{
opacity: 1.0;
}
.droppable-hover
{
outline: 2px dotted black;
}
li
{
list-style: none;
}
</style>
<div style="height:1000px;">
<div id="ctl00_DefaultContent_UpdatePanel1">
<table id="ctl00_DefaultContent_dlFiles" cellspacing="0"
border="0" style="border-collapse:collapse;">
<tr>
<td>
<div id="div1" class="block">
<li
id="ctl00_DefaultContent_dlFiles_ctl00_imageItem">
<img alt="" src="library/images1.jpg"
width="150" height="81" alt="images1.jpg"/>
DollHouse_pg1.jpg
</li>
<li
id="ctl00_DefaultContent_dlFiles_ctl00_imageID" style="visibility:
hidden;">1</li>
</div>
</td><td>
<div id="div1" class="block">
<li
id="ctl00_DefaultContent_dlFiles_ctl01_imageItem">
<img alt="" src="library/images2.jpg"
width="150" height="81" alt="images2.jpg"/>
DollHouse_pg2.jpg
</li>
<li
id="ctl00_DefaultContent_dlFiles_ctl01_imageID" style="visibility:
hidden;">2</li>
</div>
</td></tr>
</table>
</div>
<div id="ctl00_DefaultContent_pnlDrop">
<div id="drop1" class="drop">
<table>
<tr><td>
Slideshow file list
</td>
</tr>
<tr><td>
<p><a href="#">Save Changes</a></p>
</td>
</tr>
<tr><td>
Preview Slideshow
</td>
</tr>
</table>
</div>
<div id="display">
</div>
<div id="parent" style="width: 100px; height: 100px">
<div id="child">
</div>
</div>
<a id="ctl00_DefaultContent_lnkSave"
href="javascript:__doPostBack('ctl00$DefaultContent$lnkSave','')">Save
Changes</a>
</div>
</div>
