Question

因此，我使用draggable="true"作为div，其中包含从Twitter's Bootstrap应用span个类的其他几个div。引发的问题是当我拖动持有者时，未显示子元素。如果我从Bootstrap中删除类，那么在拖动过程中会显示元素。

可以在jsfiddle.net/8umGq/找到破损的例子。

究竟是什么导致了这个问题，为了使用span类并且在拖动时仍然看到内容，我应该覆盖什么？

我想让它适用于Chrome的最新版或测试版，并且仍保留样式和span类的位置。

Answer 1

我设法通过将position: relative;添加到.holder元素来修复它。

请参阅此处示例jsfiddle.net/bq9qw/

Answer 2

我认为你必须回到jQuery以使可拖动的功能正常工作，如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .holder {
            height: 20px;
            background-color: rgba(255, 0, 0, 0.5);
        }

        .span2 {
            background-color: rgba(0, 255, 0, 0.5);
        }
    </style>
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
    <script>
        function init(){
            $('div.holder').draggable();
        }

        $(document).ready(function(){init()});
    </script>
</head>
<body>
<div class="row">
    <div class="holder">
        <div class="span2">
            Foo
        </div>
        <div class="span2">
            Bar
        </div>
    </div>
</div>
</body>
</html>

使用draggable =“true”拖动时为什么不显示div的内容？

2 个答案: