Question

我在使用带有类选择器的多个droppable时遇到问题。

我想要做的是将任何droppables（class =“dropZone”）上的内部div（class =“widget”）拖到另一个dropZone，记录我刚刚离开的dropZone的id，然后当drop完成记录我丢弃的dropZone的id。

我还想记录可拖动的id。

现在，所有似乎都工作正常，直到我意识到应该存储我刚刚来的那个的emptyShift变量被写入我刚才去的dropZone的id。 out：事件发生两次还是什么？我确定这只是一个事件发生的命令，但我似乎无法找到它......

我正在记录三个变量：shiftId，colleagueId和emptyShiftId，我的想法是我可以通过拖动一个来换掉时间段的人，从我来自的插槽，获取我去过的插槽的ID交换周围人的ID，以便他们有效地交换班次。

这是我的javascript：

<script type="text/javascript">
    var j$ = jQuery.noConflict();
    var shiftId;
    var colleagueId;
    var emptyShift;
    j$(document).ready(function(){
        var emptyShift;
        makeDraggable();
    });

    function makeDraggable(){
        j$('.widget').draggable({
            revert: 'invalid'
        });

        //Make  area droppable
        j$(".dropZone").droppable({
            greedy: true,
            drop: function(event, ui){ 
                j$(this).addClass('ui-state-highlight');
                shiftId = j$(this).attr('id')
                colleagueId = ui.draggable.attr('id');
                updateShift(colleagueId, shiftId, emptyShift);

                // alert("drop to: " + shiftId);
            },
            out: function(event, ui){
                j$(this).removeClass('ui-state-highlight'); 
                emptyShift = j$(this).attr('id');
                // alert("Go from: " + emptyShift); 
            } 
        });  
    }
</script>

这是我的HTML：

<table>
    <tbody>
        <tr>
            <td class="label">
                <div class="dropZone" id="a03A00000067qEDIAY">
                    <b>Start Time</b>
                    05:00
                    <div class="widget" id="a0GA000000BduVZMAZ">
                        <b>First Name</b>
                        Bloggs
                        <b>Mobile No.</b>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>
<table>
    <tbody>
        <tr>
            <td class="label">
                <div class="dropZone" id="a03A00000067qE8IAI">
                    <b>Start Time</b>
                    04:00
                    <div class="widget" id="a0GA000000BduVZMHZ">
                        <b>First Name</b>
                        Jones
                        <b>Mobile No.</b>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

页面上有多个droppable，从（out）jQuery中拖出一个ID

0 个答案: