JQuery UI 可拖动元素在 Chrome 中留下奇怪的痕迹-6ren

JQuery UI 可拖动元素在 Chrome 中留下奇怪的痕迹

转载作者：技术小花猫更新时间：2023-10-29 10:18:03

我正在尝试在这里制作我的第一个 chrome 扩展程序。它是一个便签板。但是当我尝试使用 JQueryUI 将第一个元素拖到我的板上时，它会在 chrome 中留下水平线作为痕迹。

这是一个屏幕截图。

screenshot

这是代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sticky notes using CSS3 and Google Fonts (Step 5)</title>
<link  href="http://fonts.googleapis.com/css?family=Reenie+Beanie:regular" rel="stylesheet" type="text/css"> 
<style type="text/css">

body{
  font-family:arial,sans-serif;
  font-size:100%;
  background:#666;
  color:#fff;
}
h2,p{
  font-size:100%;
  font-weight:normal;
}
ul,li{
  list-style:none;
}
ul{
  overflow:hidden;
  padding:3em;
}
ul li div{
  color:#000;
  background:#ffc;
  min-height:10em;
  min-width:10em;
  padding: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 linear;
  -o-transition:-o-transform .15s linear;
  -webkit-transition:-webkit-transform .15s linear;
}
ul li{
  margin:1em;
  float:left;
}
ul li h2{
  font-size:140%;
  font-weight:bold;
  padding-bottom:10px;
}
ul li p{
  font-family:"Reenie Beanie",arial,sans-serif;
  font-size:180%;
}
ul li div{
  -webkit-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -moz-transform:rotate(-6deg);
}
ul li:nth-child(even) div{
  -o-transform:rotate(4deg);
  -webkit-transform:rotate(4deg);
  -moz-transform:rotate(4deg);
  position:relative;
  top:5px;
  background:#cfc;
}
ul li:nth-child(3n) div{
  -o-transform:rotate(-3deg);
  -webkit-transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
  position:relative;
  top:-5px;
  background:#ccf;
}
ul li:nth-child(5n) div{
  -o-transform:rotate(5deg);
  -webkit-transform:rotate(5deg);
  -moz-transform:rotate(5deg);
  position:relative;
  top:-10px;
}
ul li div:hover,ul li div:focus{
  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-transform: scale(1.25);
  -o-transform: scale(1.25);
  position:relative;
  z-index:5;
}
ol{text-align:center;}
ol li{display:inline;padding-right:1em;}
ol li div{color:#fff;}
</style>
<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>
</head>
<body>
  <ol>
    <li><a href="step1.html">Step #1</a></li>
    <li><a href="step2.html">Step #2</a></li>
    <li><a href="step3.html">Step #3</a></li>
    <li><a href="step4.html">Step #4</a></li>
    <li><strong>Step #5</strong></li>
    <li><a href="#"></a></li>
  </ol>
  <ul>
    <li >
      <div class="dragable">
        <h2>Title #1</h2>
        <p >Text Content #1</p>

      </div>
    </li>
    <li>
      <div class="dragable">
        <h2>Title #2</h2>
        <p>Text Content #2</p>
      </div>
    </li>
    <li>
      <div class="dragable">
        <h2>Title #3</h2>
        <p>Text Content #3</p>
      </div>
    </li>
    <li>
      <div class="dragable">
        <h2>Title #4</h2>
        <p>Text Content #4</p>
      </div>
    </li>
    <li>
      <div class="dragable">
        <h2>Title #5</h2>
        <p>Text Content #5</p>
      </div>
    </li>
    <li>
      <div class="dragable">
        <h2>Title #6</h2>
        <p>Text Content #6</p>
      </div>
    </li>
    <li>
      <div class="dragable">
        <h2>Title #2</h2>
        <p>Text Content #2</p>
      </div>
    </li>
    <li>
      <div class="dragable">
        <h2>Title #7</h2>
        <p>Text Content #7</p>
      </div>
    </li>
    <li>
      <div class="dragable">
        <h2>Title #8</h2>
        <p>Text Content #8</p>
      </div>
    </li>
  </ul>
</body>
</html>

和javascript

$(document).ready(function() {
    $(function() {
        $(".dragable").draggable().bind('click', function(){
          $(this).focus();
        });
    });

    $('.dragable').bind('click', function() {
        $(this).attr('contenteditable', 'true');
    }).blur(
        function() {
            $(this).attr('contenteditable', 'false');
        });
})

注意:经过一些实验，我发现问题出在 -webkit-transform如果我将它们注释掉，问题就不会出现。

最佳答案

我终于有了一个可行的解决方法。

刚用 outline: 1px solid transparent;在 div 上修复了问题:)

这是一个抗锯齿问题。

关于JQuery UI 可拖动元素在 Chrome 中留下奇怪的痕迹，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12348884/

文章推荐： css - Bootstrap 标签输入宽度

文章推荐： javascript - 聆听点击和拖动的值并相应地运行

文章推荐： iOS模拟器无法连接到本地网络IP地址

linux - 如何从我的目录中删除所有 SVN 痕迹？
我希望递归地清除 SVN，但当然保留我的文件。最佳答案你的意思是杀死所有的 .svn 目录？应该这样做: find -name '.svn' -type d -exec rm -rf {} ';'
c# - Fody 是否在总装中留下任何引用资料/痕迹？
有没有Fody的痕迹，或其依赖项(引用)，在最终编织的程序集中？最佳答案所以这真的应该是几个问题 Fody 是否在最终组装中留下任何引用资料？ No Fody 不需要任何引用，也不会在 ILWea
linux - 如何为我的存储库删除所有 Git 痕迹？
这个问题在这里已经有了答案: Do a "git export" (like "svn export")? (31 个答案) How do I remove version tracking fro
clojure - 请帮助我理解这些 Clojure Hprof 痕迹
我有一些 Clojure 代码正在模拟然后处理数值数据。数据基本上是双值向量；处理主要涉及以各种方式对它们的值进行求和。我将在下面包含一些代码，但我的问题(我认为)更笼统 - 我只是不知道如何解释 h
objective-c - 核心动画和 CALayers 中的残留/痕迹
我正在制作一个 Cocoa 应用程序，使用 Core Animation 来创建自定义 UI。然而，每当我拖动一些图层时，它们通常会在其他图层上留下一些“残留物/痕迹”。到目前为止，我的猜测是这与我
shiny - 在 Shiny 上动态添加 plotly 痕迹
我正在构建一个应用程序，允许用户使用 selectInput 在绘图图上动态添加和删除跟踪。我试图从 plotly 包中使用 plotlyProxy () 和 plotlyProxyInvoke (
jquery - 用 jquery 留下 body 痕迹
我一直在尝试使用 jquery 创建一种效果，当您将鼠标移到一个 div 上时，整个 body 都会移动，并沿着它经过的点留下一条轨迹。我创建了一个可以使整个 body 移动的功能，但我找不到离开轨迹
cocoa - NSClipView 在 setDrawsBackground 上出现重影、伪影、痕迹 :NO
我试图让 NSClipView 绘制清晰的背景(将颜色设置为清除黑框中的结果)，或者根本不绘制背景。不绘制背景会导致重影伪影。不管怎样，要让它在没有伪影的情况下绘制没有背景的？？？ NSClipVie
python - py4j.protocol.Py4JError : An error occurred while calling None. 无。痕迹:
我尝试在 SPARK 集群上运行 Python 脚本，出现错误 File "create_csv_ecs.py", line 15, in sc = SparkContext(conf=conf)

技术小花猫

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

JQuery UI 可拖动元素在 Chrome 中留下奇怪的痕迹