为啥使用 draggable="true" 拖动时不显示 div 的内容？
Posted
技术标签:
【中文标题】为啥使用 draggable="true" 拖动时不显示 div 的内容？【英文标题】：Why contents of a div are not shown while dragging with the draggable="true"?为什么使用 draggable="true" 拖动时不显示 div 的内容？ 【发布时间】：2012-10-01 07:18:36 【问题描述】：所以我使用draggable="true" 作为一个div，其中包含从Twitter's Bootstrap 应用的span 类的几个其他div。引发的问题是当我拖动支架时，未显示子元素。如果我从 Bootstrap 中删除类，则元素会在拖动过程中显示。
可在jsfiddle.net/8umGq/ 上找到损坏的示例。
究竟是什么导致了问题，为了使用span 类并在拖动时仍能看到内容，我应该覆盖什么？
我想让它在 Chrome 的最新版本或 beta 版本上运行，并且仍然保留样式和 span 类的位置。
【问题讨论】：
有趣。这是一种奇怪的行为。各种浏览器都会出现这种情况吗？ @fdomig 在 Chrome 上测试过，目前我不关心其他浏览器。 【参考方案1】：我设法通过将position: relative; 添加到.holder 元素来修复它。
在此处查看示例jsfiddle.net/bq9qw/
【讨论】：
我不知道你是否注意到了，但这极大地改变了 span 元素的大小。拥有这些精确跨度的整个想法毫无意义......i.imgur.com/6bVAX.png 是的，你是对的。我设法通过添加位置来修复它：相对；给持有人：jsfiddle.net/bq9qw 非常酷.. 将您的答案更新为最新表格，我会在我的项目中尝试它，看看它是否也能按预期工作。 您可以删除损坏的示例并删除编辑字，因为如果需要可以通过历史记录访问它以供参考：***.com/posts/12827915/revisions【参考方案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>
【讨论】：
重点是不要使用任何外部的东西。如果想包括 jQuery UI 的开销，我会费心尝试 HTML5 方法。以上是关于为啥使用 draggable="true" 拖动时不显示 div 的内容？的主要内容，如果未能解决你的问题，请参考以下文章
draggable="true" 在 Chrome 打包应用的 <webview> 中不起作用
使用 javascript 访问 `draggable` 属性
拖拽的效果 第一步 设置 可拖拽的属性 draggable="true" 绑定drag 事件 第二步 设置 放置位置 触发的事件 dragover 第三步 设置 放置之后