1

我正在玩弄 jQuery 和拖放功能。我有一个在 CSSdiv中设置的。hidden激活拖动元素时，droppable应通过设置display为inline（这是默认值）来显示元素。

但是，display: inline;并不推翻display: none;. 如何做到这一点（通过 jQuery 或 CSS）？

我当前的代码：

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Droppable - Visual feedback</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  <style>
    #draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
    #droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
    #droppable { border-width: 3px; border-style: solid; border-color: #585FCC; height: 20px; display: none; }
    .droppable-highlight { display: inline; }
  h3 { clear: left; }
  </style>
  <script>
  $(function() {
    $( "#draggable2" ).draggable();
    $( "#droppable" ).droppable({
      accept: "#draggable2",
      activeClass: "droppable-highlight",
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      }
    });
  });
  </script>
</head>
<body>

<h3>Feedback on activating draggable:</h3>

<div id="draggable2" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>

<div id="droppable" >
  <p>Drop here</p>
</div>


</body>
</html>

Tinker.io 链接：http ://tinker.io/bf197

4

2 回答 2

4

问题是当 droppable 被隐藏（有display: none）时，jQuery UI 代码没有将类添加到 droppable 中。如果它是可见的，它会添加它。

这是一个没有更新的修补程序：http display: none: //tinker.io/bf197/1 

#droppable { border-width: 3px; border-style: solid; border-color: #585FCC; height: 20px; }
#droppable.droppable-highlight { border-color: red; display: block; }

如果您在 Chrome 的开发工具或类似工具中观看，您会看到该类被添加（并且边框变为红色）。

但是再看看这个：http display: none: //tinker.io/bf197/2

#droppable { border-width: 3px; border-style: solid; border-color: #585FCC; height: 20px; display: none; }
#droppable.droppable-highlight { border-color: red; display: block; }

如果您在开发工具中观看，则永远不会添加该类。显然，如果它是不可见的，jQuery UI 会忽略 droppable。

您可能需要向 jQuery UI 团队提出这个问题，因为代码似乎明确地检查了这种情况。

我确实找到了部分解决方法：使用visibility而不是display：http ://tinker.io/bf197/3

#droppable { border-width: 3px; border-style: solid; border-color: #585FCC; height: 20px; visibility: hidden; }
#droppable.droppable-highlight { visibility: visible; }

这行得通，但当然存在元素visibility: hidden仍然占用其布局空间的问题。

您可以从布局中删除元素而不制作它display: none并获得您想要的效果：http: //tinker.io/bf197/5

#droppable { border-width: 3px; border-style: solid; border-color: #585FCC; height: 40px; position: absolute; left: -10000px; }
#droppable.droppable-highlight { border-color: red; position: static; }

这通过在正常情况下将元素定位在页面外来工作，但是当它具有类时覆盖该定位。除了破解 jQuery UI 代码之外，我认为这display: none与您将要获得的行为一样接近。

其他注意事项：

  • 我根据上面的规则更新了选择器，因此它足够具体，因为否则 ID 选择器的特异性超过了类选择器的特异性。

  • 的默认display值div是block，不是inline。

于 2013-04-08T09:25:06.717 回答
1

这是因为CSS 偏好规则

考虑这段代码：

#droppable { border-width: 3px; border-style: solid; border-color: #585FCC; height: 20px; display: none; }
.droppable-highlight { display: inline; }

第一个是 id-selector，它比第二个（类选择器）更具体。改变.droppable-highlightto#droppable.droppable-highlight就可以了:)

你也需要做同样的事情，#droppable.ui-state-highlight因为droppable-highlight当你放手时这个类被删除了。

其次，当一个元素是 时display:none，它不占用屏幕上的空间，你不能“拖放”到它上面。相反，使用visibility

所以，最终的代码是：

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Droppable - Visual feedback</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  <style>
    #draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
    #droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
    #droppable { border-width: 3px; border-style: solid; border-color: #585FCC; height: 20px; visibility:hidden; }
    #droppable.droppable-highlight { border-color: red; visibility:visible; }
    #droppable.ui-state-highlight { border-color: red; visibility:visible; }
  h3 { clear: left; }
  </style>
  <script>
  $(function() {
    $( "#draggable2" ).draggable();
    $( "#droppable" ).droppable({
      accept: "#draggable2",
      activeClass: "droppable-highlight",
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      }
    });
  });
  </script>
</head>
<body>

<h3>Feedback on activating draggable:</h3>

<div id="draggable2" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>

<div id="droppable" >
  <p>Drop here</p>
</div>


</body>
</html>

http://tinker.io/bf197/4

于 2013-04-08T09:25:19.173 回答