Response title
This is preview!
Frustrating problem with dropabble
in Using jQuery UI
•
4 months ago
I have a menu planner that looks like this
My problem is that sometimes when I drop a recipe from the menu on a slot, it ends up in the next slot to the right instead. So if I drop something in the first Mon slot, it ends up un the first tue slot. Not always though. Hope that makes sense.
Here is the html
My problem is that sometimes when I drop a recipe from the menu on a slot, it ends up in the next slot to the right instead. So if I drop something in the first Mon slot, it ends up un the first tue slot. Not always though. Hope that makes sense.
Here is the html
- <div id=drop>
<table id=menuplan>
<th></th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Sun</th>
<tr>
<td class=meal>
B'fast
</td>
<td>
<div name=mon1 id=droppablemon1></div>
<div name=mon2 id=droppablemon2></div>
<div name=mon3 id=droppablemon3></div>
<div name=mon4 id=droppablemon4></div>
</td>
<td>
<div name=tue1 id=droppabletue1></div>
<div name=tue2 id=droppabletue2></div>
<div name=tue3 id=droppabletue3></div>
<div name=tue4 id=droppabletue4></div>
</td>
<td>
<div name=wed1 id=droppablewed1></div>
<div name=wed2 id=droppablewed2></div>
<div name=wed3 id=droppablewed3></div>
<div name=wed4 id=droppablewed4></div>
</td>
<td>
<div name=thu1 id=droppablethu1></div>
<div name=thu2 id=droppablethu2></div>
<div name=thu3 id=droppablethu3></div>
<div name=thu4 id=droppablethu4></div>
</td>
<td>
<div name=fri1 id=droppablefri1></div>
<div name=fri2 id=droppablefri2></div>
<div name=fri3 id=droppablefri3></div>
<div name=fri4 id=droppablefri4></div>
</td>
<td>
<div name=sat1 id=droppablesat1></div>
<div name=sat2 id=droppablesat2></div>
<div name=sat3 id=droppablesat3></div>
<div name=sat4 id=droppablesat4></div>
</td>
<td>
<div name=sun1 id=droppablesun1></div>
<div name=sun2 id=droppablesun2></div>
<div name=sun3 id=droppablesun3></div>
<div name=sun4 id=droppablesun4></div>
</td>
</tr>
<th></th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Sun</th>
<tr>
<td class=meal>
Lunch
</td>
<td>
<div name=mon5 id=droppablemon5></div>
<div name=mon6 id=droppablemon6></div>
<div name=mon7 id=droppablemon7></div>
<div name=mon8 id=droppablemon8></div>
<div name=mon9 id=droppablemon9></div>
<div name=mon10 id=droppablemon10></div>
</td>
<td>
<div name=tue5 id=droppabletue5></div>
<div name=tue6 id=droppabletue6></div>
<div name=tue7 id=droppabletue7></div>
<div name=tue8 id=droppabletue8></div>
<div name=tue9 id=droppabletue9></div>
<div name=tue10 id=droppabletue10></div>
</td>
<td>
<div name=wed5 id=droppablewed5></div>
<div name=wed6 id=droppablewed6></div>
<div name=wed7 id=droppablewed7></div>
<div name=wed8 id=droppablewed8></div>
<div name=wed9 id=droppablewed9></div>
<div name=wed10 id=droppablewed10></div>
</td>
<td>
<div name=thu5 id=droppablethu5></div>
<div name=thu6 id=droppablethu6></div>
<div name=thu7 id=droppablethu7></div>
<div name=thu8 id=droppablethu8></div>
<div name=thu9 id=droppablethu9></div>
<div name=thu10 id=droppablethu10></div>
</td>
<td>
<div name=fri5 id=droppablefri5></div>
<div name=fri6 id=droppablefri6></div>
<div name=fri7 id=droppablefri7></div>
<div name=fri8 id=droppablefri8></div>
<div name=fri9 id=droppablefri9></div>
<div name=fri10 id=droppablefri10></div>
</td>
<td>
<div name=sat5 id=droppablesat5></div>
<div name=sat6 id=droppablesat6></div>
<div name=sat7 id=droppablesat7></div>
<div name=sat8 id=droppablesat8></div>
<div name=sat9 id=droppablesat9></div>
<div name=sat10 id=droppablesat10></div>
</td>
<td>
<div name=sun5 id=droppablesun5></div>
<div name=sun6 id=droppablesun6></div>
<div name=sun7 id=droppablesun7></div>
<div name=sun8 id=droppablesun8></div>
<div name=sun9 id=droppablesun9></div>
<div name=sun10 id=droppablesun10></div>
</td>
</tr><div id=drop>
<table>
<th></th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Sun</th>
<tr>
<td class=meal>
B'fast
</td>
<td>
<div name=mon1 id=droppablemon1></div>
<div name=mon2 id=droppablemon2></div>
<div name=mon3 id=droppablemon3></div>
<div name=mon4 id=droppablemon4></div>
</td>
<td>
<div name=tue1 id=droppabletue1></div>
<div name=tue2 id=droppabletue2></div>
<div name=tue3 id=droppabletue3></div>
<div name=tue4 id=droppabletue4></div>
</td>
<td>
<div name=wed1 id=droppablewed1></div>
<div name=wed2 id=droppablewed2></div>
<div name=wed3 id=droppablewed3></div>
<div name=wed4 id=droppablewed4></div>
</td>
<td>
<div name=thu1 id=droppablethu1></div>
<div name=thu2 id=droppablethu2></div>
<div name=thu3 id=droppablethu3></div>
<div name=thu4 id=droppablethu4></div>
</td>
<td>
<div name=fri1 id=droppablefri1></div>
<div name=fri2 id=droppablefri2></div>
<div name=fri3 id=droppablefri3></div>
<div name=fri4 id=droppablefri4></div>
</td>
<td>
<div name=sat1 id=droppablesat1></div>
<div name=sat2 id=droppablesat2></div>
<div name=sat3 id=droppablesat3></div>
<div name=sat4 id=droppablesat4></div>
</td>
<td>
<div name=sun1 id=droppablesun1></div>
<div name=sun2 id=droppablesun2></div>
<div name=sun3 id=droppablesun3></div>
<div name=sun4 id=droppablesun4></div>
</td>
</tr>
<th></th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Sun</th>
<tr>
<td class=meal>
Lunch
</td>
<td>
<div name=mon5 id=droppablemon5></div>
<div name=mon6 id=droppablemon6></div>
<div name=mon7 id=droppablemon7></div>
<div name=mon8 id=droppablemon8></div>
<div name=mon9 id=droppablemon9></div>
<div name=mon10 id=droppablemon10></div>
</td>
<td>
<div name=tue5 id=droppabletue5></div>
<div name=tue6 id=droppabletue6></div>
<div name=tue7 id=droppabletue7></div>
<div name=tue8 id=droppabletue8></div>
<div name=tue9 id=droppabletue9></div>
<div name=tue10 id=droppabletue10></div>
</td>
<td>
<div name=wed5 id=droppablewed5></div>
<div name=wed6 id=droppablewed6></div>
<div name=wed7 id=droppablewed7></div>
<div name=wed8 id=droppablewed8></div>
<div name=wed9 id=droppablewed9></div>
<div name=wed10 id=droppablewed10></div>
</td>
<td>
<div name=thu5 id=droppablethu5></div>
<div name=thu6 id=droppablethu6></div>
<div name=thu7 id=droppablethu7></div>
<div name=thu8 id=droppablethu8></div>
<div name=thu9 id=droppablethu9></div>
<div name=thu10 id=droppablethu10></div>
</td>
<td>
<div name=fri5 id=droppablefri5></div>
<div name=fri6 id=droppablefri6></div>
<div name=fri7 id=droppablefri7></div>
<div name=fri8 id=droppablefri8></div>
<div name=fri9 id=droppablefri9></div>
<div name=fri10 id=droppablefri10></div>
</td>
<td>
<div name=sat5 id=droppablesat5></div>
<div name=sat6 id=droppablesat6></div>
<div name=sat7 id=droppablesat7></div>
<div name=sat8 id=droppablesat8></div>
<div name=sat9 id=droppablesat9></div>
<div name=sat10 id=droppablesat10></div>
</td>
<td>
<div name=sun5 id=droppablesun5></div>
<div name=sun6 id=droppablesun6></div>
<div name=sun7 id=droppablesun7></div>
<div name=sun8 id=droppablesun8></div>
<div name=sun9 id=droppablesun9></div>
<div name=sun10 id=droppablesun10></div>
</td> - </tr>
And here is the javascript
- $(".rlink").draggable({
zIndex: 999,
helper: 'clone',
revert: false
});
$("#menuplan div").droppable({
drop: function(event, ui) {
var slot=$(this).attr('id').substr(9);
var link = $('.ui-draggable-dragging').text();
var id = $(ui.draggable).attr("id").substr(1);
var newhtml = '<img id=mon title="Delete Item" src=images/del.png> ' + link;
$(this).html(newhtml);
$("#id" + slot).val(id);
$("#link" + slot).val(link);
}
});
1
