JQuery UI 可拖动元素在 Chrome 中留下奇怪的痕迹 [英] JQuery UI draggable element leaves weird traces in Chrome
本文介绍了JQuery UI 可拖动元素在 Chrome 中留下奇怪的痕迹的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试在这里制作我的第一个 chrome 扩展程序.这是一个便签板.但是,当我尝试使用 JQueryUI 拖动板上的第一个元素时,它会在 chrome 中留下水平线作为痕迹.
这是截图.
这是代码.
<头><meta charset="utf-8"/><title>使用 CSS3 和 Google 字体的便签(步骤 5)</title><link href="http://fonts.googleapis.com/css?family=Reenie+Beanie:regular" rel="stylesheet" type="text/css"><style type="text/css">身体{字体系列:arial,sans-serif;字体大小:100%;背景:#666;颜色:#fff;}h2,p{字体大小:100%;字体粗细:正常;}ul,li{列表样式:无;}ul{溢出:隐藏;填充:3em;}ul li div{颜色:#000;背景:#ffc;最小高度:10em;最小宽度:10em;填充:1em;-moz-box-shadow:5px 5px 7px rgba(33,33,33,1);-webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);box-shadow: 5px 5px 7px rgba(33,33,33,.7);-moz-transition:-moz-transform .15s 线性;-o-transition:-o-transform .15s 线性;-webkit-transition:-webkit-transform .15s 线性;}乌利{保证金:1em;向左飘浮;}ul li h2{字体大小:140%;字体粗细:粗体;填充底部:10px;}ul li p{font-family:"Reenie Beanie",arial,sans-serif;字体大小:180%;}ul li div{-webkit-transform:旋转(-6度);-o-变换:旋转(-6度);-moz 变换:旋转(-6 度);}ul li:nth-child(even) div{-o-变换:旋转(4度);-webkit-transform:旋转(4度);-moz-transform:旋转(4度);位置:相对;顶部:5px;背景:#cfc;}ul li:nth-child(3n) div{-o-变换:旋转(-3度);-webkit-transform:rotate(-3deg);-moz 变换:旋转(-3 度);位置:相对;顶部:-5px;背景:#ccf;}ul li:nth-child(5n) div{-o-变换:旋转(5度);-webkit-transform:旋转(5度);-moz-transform:旋转(5度);位置:相对;顶部:-10px;}ul li div:悬停,ul li div:焦点{box-shadow:10px 10px 7px rgba(0,0,0,.7);-moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);-webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);-webkit-transform: scale(1.25);-moz 变换:比例(1.25);-o-变换:比例(1.25);位置:相对;z-索引:5;}ol{文本对齐:居中;}ol li{display:inline;padding-right:1em;}ol li div{颜色:#fff;}</风格><script src="jquery-1.8.0.min.js"></script><script src="jquery-ui-1.8.23.custom.min.js"></script><script src="step.js"></script>头部><身体><ol><li><a href="step1.html">步骤#1</a></li><li><a href="step2.html">步骤#2</a></li><li><a href="step3.html">步骤#3</a></li><li><a href="step4.html">步骤#4</a></li><li><strong>步骤#5</strong></li><li><a href="#"></a></li></ol><ul><li ><div class="dragable"><h2>标题#1</h2><p >文本内容#1</p>
<li><div class="dragable"><h2>标题#2</h2><p>文本内容#2</p>
<li><div class="dragable"><h2>标题#3</h2><p>文本内容#3</p>
<li><div class="dragable"><h2>标题#4</h2><p>文本内容#4</p>