Question

我正在做的是我有一个黑色背景的div，我想能够点击并拖动它。我正在使用JQuery UI，而且我似乎无法弄清楚如何做到这一点。

当点击div的图标时，它会切换显示/隐藏，我希望能够点击并将其拖动到网页上。稍后这将对计算器，秒表等有所帮助：但我似乎无法弄清楚如何显示/隐藏div以及如何拖动它。

非常感谢任何帮助。

清单：

{
    "name": "DIV Drag Test",
    "version": "0.0.1",
    "description": "DIV Drag Test",
    "background_page": "background.html",
    "permissions": ["http://*/*", "tabs"],

    "icons": {
        "48": "logo.png"
    },

    "browser_action": {
        "default_icon": "logo.png",
        "default_title": "DIV Drag Test"
    },

    "content_scripts": [
    {
      "matches": ["http://*/*"],
      "css": ["style.css"],
      "js": ["js/jquery.js", "js/jquery-ui.js"]
    }
  ]
}

的CSS：

div#test8935 {
    cursor:pointer;
    width:320px;
    height:240px;
    background-color:#000;}

background.html

<script>
$(document).ready(function() {
    $('div#test8935').draggable();

    chrome.browserAction.onClicked.addListener(function(tab) {
        $('div#test8935').toggle(350);
    });
});

Answer 1

自从我完成Chrome扩展程序开发以来已经有一段时间了，但这些是我最初的想法，基于我的记忆。

看起来你正试图通过background.html操纵网站上的div。您确定不想要定位内容脚本吗？后台没有界面，永远不会直接与页面交互。

所以我认为你想要做的是将你的脚本从background.html移动到一个新的js文件中，并将它包含在你的contentscript js params中。

"content_scripts": [
{
  "matches": ["http://*/*"],
  "css": ["style.css"],
  "js": ["js/jquery.js", "js/jquery-ui.js", "contentscript.js"]
}

DIV在网页上拖动（Chrome扩展程序）

1 个答案: