Question

我想设计一个类似于Jira泳道的看板。以下代码显示了精简版，用于演示该问题。

目标：左侧的方块将被拖动到关闭状态（红色或绿色），在拖动开始时会“弹出”。为了用户反馈，当前悬停的可放下部分将以黄色边框表示。对于该操作，我打算利用可放置对象的选项“ hoverClass”。

问题：将可拖动对象拖动（并按住）在状态字段上时，黄色边框不会显示。无论如何，当放在任何一个状态字段上时，它都被认为是有效的丢弃。

但是一旦鼠标（至少几乎是鼠标）离开了文档，hoverClass就会生效。从那时起，突出显示的反馈开始起作用。要进行复制，请将光标移到可拖动的框，单击并将框拖动到一个解决方案状态，然后（仍在拖动）将光标向上移并移出文档（同时被拖动的框仍在解决方案状态上方）。突然，状态被突出显示。

在Firefox Quantrum 65和Internet Explorer 11上进行了测试，结果相同。

我的假设是hoverClass并未应用于（最初）隐藏的overlay div，因此它的droppable尚未受到影响。但是，当鼠标离开文档时，会触发某些事件，从而导致可放置状态字段的更新和hoverClass类得到应用。

是否可以立即或在切换完成后应用hoverClass？我试图手动触发对文档的鼠标悬停，但是没有用。

演示代码：

function startDrag (event, ui) {
  $("#overlay").toggle("fast");
}
function stopDrag (event, ui) {
  $("#overlay").toggle("fast");
}
function myHelper (event) {
  return "<div class='ui-widget-content w3-container', style='z-index:1000;width:100px; height: 100px; background-color: #c0c0c0; float: left;'>move me</div>"
}

$( function() {
  $("#overlay").hide();
  $( "#draggable" ).draggable(
    {helper:myHelper,
      containment:"parent",
      snap:true,
      start:startDrag,
      stop:stopDrag,
    }
  );
  $( ".clsdrop" ).droppable( {
    drop: function( event, ui ) {
      console.log("dropped");
      $("#target").addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
      $("#target").css("background-color", "#fff200");
    },
    hoverClass: "framed",
  });
});

.framed {border: 4px solid yellow;}
.target-field {position:absolute;width:50%;right:0px;}

<!DOCTYPE html>
<html>
    <header>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
        <script src="http://code.jquery.com/jquery-3.3.1.min.js" 
                integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 
                crossorigin="anonymous">
        </script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    </header>
    <body>
        <section id="mainsection">
            <div id="content" style="position:absolute; width:600px; height:400px;border:3px double red;">
                <div id="draggable", class="clsdrag ui-widget-content w3-container", style="width:100px; height: 100px; background-color: #c0c0c0; float: left;">
                    <p>Drag me</p>
                </div>
                <div id="target", class="ui-widget-header w3-container", style="position:absolute; left:400px; width:150px; height:150px;background-color: #c0c0c0; float:left">
                    <p>Not yet dropped</p>
                </div>
            </div>
            <div id="overlay" style="position:absolute; width:600px; height:400px;border:3px double purple;">
                <div class="clsdrop target-field w3-container" style="top:0px;bottom:50%;background:rgba(0,255,0,0.7);">done</div>
                <div class="clsdrop target-field w3-container" style="top:50%;bottom:0px;background:rgba(255,0,0,0.7);">obsolete</div>
            </div>                
        </section>
    </body>
</html>

注意：第一次使用代码段集成。如果太混乱了，我可以直接发布一个文件的代码。

迈克尔

当在拖动过程中使目标可见时，jQuery-UI droppable的hoverClass（选项）无效

0 个答案: