Hello all, I am trying to build a dynamic drag&drop modul for my App.
It include a table that holds all the dropable divs and few shapes.
As i can't know from advance the type of shape someone will put in a div and i have to save the div or divs which the user chose to drop the shape in i need to allow the app to be very dynamic...
I managed to do it for all the celld exept from the top row for the big squer and the long line and the right collumn for the big squer and for a wide line....
The code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style type=text/css>
.draggable { width: 20px; height: 20px; background-color:Blue;}
.draggable_big { width: 40px; height: 40px; background-color:Blue;}
.draggable_wide { width: 40px; height: 20px; background-color:Blue;}
.draggable_long { width: 20px; height: 40px; background-color:Blue;}
.droppable { width: 20px; height: 20px; background-color:Red;}
</style>
<script src="JavaScript/jquery-1.4.2.js" type="text/javascript"></script>
<script src="JavaScript/jquery-ui-1.8.4.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$(".draggable").draggable({ snap: '.droppable' });
$(".draggable_big").draggable({ snap: '.droppable' });
$(".draggable_wide").draggable({ snap: '.droppable' });
$(".draggable_long").draggable({ snap: '.droppable' });
$(".droppable").droppable({
drop: function() {alert('dropped:' + $(this).attr('id')); }
});
});
</script>
</head>
<body dir="rtl">
<form id="form1" runat="server">
<div style="position:absolute; top:0; right:100px">
<table border="1" cellpadding="0" cellspacing="0">
<tr id="tr_1" runat="server">
<td id="td_1_1" runat="server"><div id="1_1" class="droppable"></div></td> ***not getting responce for draggable_big***
<td id="td_1_2" runat="server"><div id="1_2" class="droppable"></div></td> ***not getting responce for draggable_big***
<td id="td_1_3" runat="server"><div id="1_3" class="droppable"></div></td> ***not getting responce for draggable_big***
<td id="td_1_4" runat="server"><div id="1_4" class="droppable"></div></td> ***not getting responce for draggable_big***
</tr>
<tr id="tr_2" runat="server">
<td id="td_2_1" runat="server"><div id="2_1" class="droppable"></div></td> ***not getting responce for draggable_big***
<td id="td_2_2" runat="server"><div id="2_2" class="droppable"></div></td>
<td id="td_2_3" runat="server"><div id="2_3" class="droppable"></div></td>
<td id="td_2_4" runat="server"><div id="2_4" class="droppable"></div></td>
</tr>
<tr id="tr_3" runat="server">
<td id="td_3_1" runat="server"><div id="3_1" class="droppable"></div></td> ***not getting responce for draggable_big***
<td id="td_3_2" runat="server"><div id="3_2" class="droppable"></div></td>
<td id="td_3_3" runat="server"><div id="3_3" class="droppable"></div></td>
<td id="td_3_4" runat="server"><div id="3_4" class="droppable"></div></td>
</tr>
<tr id="tr_4" runat="server">
<td id="td_4_1" runat="server"><div id="4_1" class="droppable"></div></td> ***not getting responce for draggable_big***
<td id="td_4_2" runat="server"><div id="4_2" class="droppable"></div></td>
<td id="td_4_3" runat="server"><div id="4_3" class="droppable"></div></td>
<td id="td_4_4" runat="server"><div id="4_4" class="droppable"></div></td>
</tr>
</table>
</div>
<div style="position:absolute; top:0; right:50px">
<div class="draggable"></div>
<div class="draggable"></div>
<div class="draggable"></div>
<div class="draggable"></div>
<div class="draggable_big"></div>
<div class="draggable_wide"></div>
<div class="draggable_long"></div>
</div>
</form>
</body>
</html>
Any one have any idea what is the problem???
10x