drag and drop working funny when using variable draggables and droppables

i have some containers that contain some divs like:

<div id="container1">
    <div id="task1" onMouseOver="DragDrop("+1+");">&am开发者_如何学JAVAp;nbsp;</div>
    <div id="task2" onMouseOver="DragDrop("+2+");">&nbsp;</div>
    <div id="task3" onMouseOver="DragDrop("+3+");">&nbsp;</div>
    <div id="task4" onMouseOver="DragDrop("+4+");">&nbsp;</div>
</div>
<div id="container2">
    <div id="task5" onMouseOver="DragDrop("+5+");">&nbsp;</div>
    <div id="task6" onMouseOver="DragDrop("+6+");">&nbsp;</div>
</div>
<div id="container3">
    <div id="task7" onMouseOver="DragDrop("+7+");">&nbsp;</div>
    <div id="task8" onMouseOver="DragDrop("+8+");">&nbsp;</div>
    <div id="task9" onMouseOver="DragDrop("+9+");">&nbsp;</div>
    <div id="task10" onMouseOver="DragDrop("+10+");">&nbsp;</div>
</div>

i'm trying to drag tasks and drop them in one of the container divs, then reposition the dropped task so that it doesn't affect the other divs nor fall outside one of them

and to do that i'm using the event onMouseOver to call the following function:

function DragDrop(id) {
           $("#task" + id).draggable({ revert: 'invalid' });
           for (var i = 0; i < nameList.length; i++) {
               $("#" + nameList[i]).droppable({
                   drop: function (ev, ui) {
                       var pos = $("#task" + id).position();
                       if (pos.left <= 0) {
                           $("#task" + id).css("left", "5px");
                       }
                       else {
                           var day = parseInt(parseInt(pos.left) / 42);
                           var leftPos = (day * 42) + 5;
                           $("#task" + id).css("left", "" + leftPos + "px");
                       }
                   }
               });

           }
       }

where:

nameList = [container1, container2, container3];

the drag is working fine, but the drop is not really, it's just a mess! any help please?? when i hardcode the id and the container, then it works beautifully, but as soon as i use id in drop then it begins to work funny!

any suggestions??? thanks a million in advance Lina

Consider coding it like this:

<div id="container1" class="container">
    <div id="task1" class="task">1&nbsp;</div>
    <div id="task2" class="task">2&nbsp;</div>
    <div id="task3" class="task">3&nbsp;</div>
    <div id="task4" class="task">4&nbsp;</div>
</div>
<div id="container2" class="container">
    <div id="task5" class="task">5&nbsp;</div>
    <div id="task6" class="task">6&nbsp;</div>
</div>
<div id="container3" class="container">
    <div id="task7" class="task">7&nbsp;</div>
    <div id="task8" class="task">8&nbsp;</div>
    <div id="task9" class="task">9&nbsp;</div>
    <div id="task10" class="task">10&nbsp;</div>
</div>



$(function(){
  $(".task").draggable({ revert: 'invalid' });
  $(".container").droppable({
                   drop: function (ev, ui) {
                       //process dropped item
                   }
               });
})