Question

我正在为一个大型项目进行服务部门每周视图调度程序的工作。它显示日历事件，传入的作业和现在要执行的作业。除了日历事件以进行重新安排外，所有内容都可以拖动，并且所有非灰色的区域均可放置（灰色插槽表示已关闭）。

我有很多事情要做。如果您单击不是灰色的网格单元格，它将弹出一个表单以进行计划。如果有一个事件，然后单击它，它将弹出一个包含详细信息的弹出窗口，您可以进行编辑。在此详细信息窗口中单击不会关闭它，但是在div之外单击会关闭它。最后，您可以单击并拖动作业，然后将其放到另一个单元格中以重新计划它。如果单击某个事件，我会将zindex跳到99，这样它会向前显示，但是当您从详细信息窗口中单击并关闭时，它会返回到其先前的zindex。话虽如此，这是我的问题：

以上所有方法均有效。但是，如果我拖放到重新计划，然后单击任何事件，则拖动帮助器会出现并跟随我的光标并尝试重新计划。一次单击就好像我长按了鼠标拖动一样，但是我没有。消除此问题的唯一方法是在网格外部单击“单击”方式，以使其还原。 在这里需要注意的一件事是，这不会在Chrome中发生，但会在Firefox和Safari中发生，并且仅当我放入已经有事件在上面的网格单元中时才会发生。将事件拖放到空列中并重新安排。然后单击另一个事件，没有问题。但是，如果我接受该事件并将其移回包含事件的列中，并将其放到那里，它会重新安排时间，但是单击下一个事件会弹出帮助程序，并尝试重新安排我刚刚单击的事件。不知道是否需要做其他事情才能使Safari和Firefox以Chrome的方式处理此问题，或者我在这里做错了什么，而Chrome只是忽略了这个问题。

这是我的调度程序的屏幕截图

代码非常复杂，因此我将尝试使其保持简单，并提供drag div和drop div以及我的拖放jquery代码。希望这足够了。

$( ".canmove_service" ).draggable({
     containment: 'sch_content_container',
     revert: true, 
     opacity: 0.8,
     scroll: true,
     helper: function() 
              { return $( "<div class='canmove_weeklyserv_helper'>Drop/Reschedule</div>" ); }
     }); 


     $( ".SchWeeklyOpen" ).droppable({
     accept: ".canmove_service",
     hoverClass: "ui-state-hover bold shadow",
     drop: function( event, ui ) { 

        //div that has the id we need
        var dragid = ui.draggable.attr("id");
        var dropid = $(event.target).attr('id');
        if ( dragid == undefined || dropid == undefined )
           {   
           dragid = ''; 
           dropid = ''; 
           }   
        if ( dragid != '' && dropid != '' )
           {   
           var temp = dragid.split('_');
           var temp2 = dropid.split('_');
           //only run this if they did not drop it back where it was.
           //if date && time does not match
           if ( temp[2] != temp2[1] || temp[3] != temp2[2] )
              RescheduleIncoming( dragid, dropid );
           }   
        }   
     });

这是我的html div。这些是动态构建在php文件中的，因为每天的工作时间和所有事件都是动态的。在构建容器div和列时，我要在一周中的每天添加数据/事件div。事件上的ID是item_date_time_type | id，其中类型告诉我这是作业，日历或即将到来的作业，然后是其auto_inc ID。

这是我单击的事件。它会调用一个控件来加载您在屏幕快照中看到的详细信息弹出窗口。

<div id="item_8446_08/07/2018_08:30:00_invServiceScheduling|704" onclick="event.stopPropagation(); get_cv_service_incoming_details( 'reg_time_8446_08/07/2018_08:30:00_invServiceScheduling|704', 'invServiceScheduling|704');" class="sch_weekly_event canmove_service" style="color: rgb(255, 255, 255); background-color: rgb(60, 180, 75); top: 48px; left: 33%; width: 56.6667%; height: 138px; z-index: 4; cursor: pointer;"> 
                                    <div style="height:95%; width:100%; overflow:hidden; text-align:center;">John Smith<br>8:30am-10:00am<br>testtt</div>
                                </div>

这是网格中我的一个可放置div的示例。单击它将加载计划表。否则，放置可拖动对象只会重新安排时间。

<div id="day_08/06/2018_08:00" class="sch_weekly_cell sch_weekly_day_open SchWeeklyOpen ui-droppable" onclick="get_cv_schedule_incoming( 'overlay2', 0, '08:00', '', '08/06/2018' );">
                            <span id="day_08/06/2018_08:00" class="sch_weekly_cell_extra sch_weekly_day_open"></span>
                            </div>

我们的业务管理系统非常庞大，这个项目也是如此。对于部分没有提供有效的代码片段，我深感抱歉。我希望通过简单说明我的观点，您将了解到我在JQuery中可能不正确地处理此问题以及导致这种奇怪行为的原因。

编辑：在Firefox中进行了进一步测试后，现在我发现拖动事件并准备丢弃事件的时间了，什么也没发生。它可以使助手一直保持向上移动，并且没有光标的任何地方都可以摆脱它，也无需进行直接挂断以重新安排时间表。就像卡在拖动事件中一样，不会掉落。希望我只是关闭了某些语法，或者可以设置一些可选参数来修复此问题，因为它现在无用了。 :-(

感谢您的时间以及与此有关的任何帮助。

jQuery拖放，帮助器问题

0 个答案: