drag and drop working funny when using variable draggables and droppables

Posted by Lina on Stack Overflow See other posts from Stack Overflow or by Lina
Published on 2010-03-19T13:02:17Z Indexed on 2010/03/19 19:41 UTC
Read the original article Hit count: 418

Filed under:
|
|
|
|

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

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about drag