drag and drop working funny when using variable draggables and droppables

Question

Hi, i have some containers that contain some divs like:

<div id="container1">
    <div id="task1" onMouseOver="DragDrop("+1+");">&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

Answer 1

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
                   }
               });
})