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，也不会落在其中一个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];

拖拉工作正常，但下降不是真的，这只是一团糟！有什么帮助吗？当我对id和容器进行硬编码时，它的工作效果非常好，但只要我在drop中使用id，它就会开始变得有趣！

任何建议??? 提前感谢一百万丽娜

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

使用变量draggables和droppables时，拖放工作很有趣

1 个答案: