Javascript 使用可变拖放和可拖放时的拖放操作

我有一些包含一些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>

阻力很好，但下降不是真的，只是一团糟！ 有什么帮助吗？？ 当我硬编码id和容器时，它工作得很好，但当我在drop中使用id时，它就开始工作了

有什么建议吗？？？ 万分感谢

---

Lina

考虑这样编码：

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

1.
2.
3.
4.
5.
6.
7.
8.
9
10
$（函数（）{
$（“.task”）.draggable（{revert:'invalid'}）；
$（“.container”）.可拖放({
下拉：功能（ev、ui）{
//处理丢弃的项
}
});
})

为什么要在鼠标悬停事件中初始化拖放功能？有什么特别的原因吗？我想知道多次调用droppable（例如，如果您将鼠标移到两个div上）是否会给您带来问题。好的，您的观点很好，但是如果我有100个任务div呢？我应该为每一个都写一个可拖放的吗？或者这种情况下的解决方案是什么？我向前迈出了一步，删除了onMouseOver事件并使用了$（“#container1”）.children（），但它仍然是稳定的！

nameList = [container1, container2, container3];

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