перетаскивание работает смешно при использовании переменных dragggables и droppables

Question

У меня есть несколько контейнеров, которые содержат некоторые элементы div, такие как:

<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>

Я пытаюсь перетащить задачи и поместить их в один из элементов div контейнера, а затем переместить отброшенную задачу, чтобы она не выполнялась.влияют на другие элементы div и не выходят за пределы одного из них

, и для этого я использую событие onMouseOver для вызова следующей функции:

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

           }
       }

где:

nameList = [container1, container2, container3];

перетаскивание работает нормально, но на самом деле падение - это не беспорядок!любая помощь, пожалуйста?когда я жестко кодирую идентификатор и контейнер, тогда он работает прекрасно, но как только я использую идентификатор в выпадающем меню, он начинает работать забавно!

любые предложения ???заранее спасибо миллион Лина

Answer 1

Рассмотрим кодирование так:

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