DIV Drag On Webpage (расширение Chrome)

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, но это мои первые мысли, основанные на том, что я помню.

Похоже, вы пытаетесь манипулировать div на веб-сайте через background.html.Вы уверены, что не хотите использовать таргетинг на скрипт контента?Фон не имеет интерфейса и никогда не будет напрямую взаимодействовать со страницей.

Так что я думаю, что вы хотите сделать, это переместить ваш скрипт из background.html в новый файл js и включить его в ваши js-параметры содержимого.

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