Javascript 使用JQuery可拖动UI的FirefoxSDK_Javascript_Jquery Ui_Firefox Addon Sdk

Javascript 使用JQuery可拖动UI的FirefoxSDK

javascript jquery-ui

Javascript 使用JQuery可拖动UI的FirefoxSDK,javascript,jquery-ui,firefox-addon-sdk,Javascript,Jquery Ui,Firefox Addon Sdk,我想在我的FirefoxSDK插件中使用这个以下是一个简单示例的源代码： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Draggable - Default functionality</title> <link rel="stylesheet" href="http://code.jque

我想在我的FirefoxSDK插件中使用这个

以下是一个简单示例的源代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #draggable { width: 150px; height: 150px; padding: 0.5em; }
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable();
  });
  </script>
</head>
<body>

<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>


</body>
</html>

在我的内容脚本中，使用主脚本和内容脚本之间的端口通信。

不幸的是，您将可拖动功能放在页面脚本中，而不是内容脚本中，进行通信

相反，将所有jQuery文件放在插件（这是内容脚本）的

data

文件夹中，创建一个javascript文件（我们称之为

draggable.js

），并将

draggable

函数放在那里。然后像这样使用

main.js 然后，您可以通过在

draggable.js

和

worker.on

中使用

main.js

更新：编辑的main.js和draggable.js如下所示：

draggable.js

您应该在

draggable.js中执行与页面相关的任何操作，并且仅当您需要访问任何Firefox sdk模块（只能在main.js中访问）时才发送变量。嘿，感谢您的回复，但它不是这样工作的。。。也许我用错端口了。。。我希望我的可拖动元素在当前选项卡中，而不是在我的面板中。这是可能的吗？上面是用于注入选项卡，而不是面板。我已经使代码更加明确。如果您遇到问题，请发布您遇到的任何错误。
$(function() {
    $( "#draggable" ).draggable();
  });

var tabs = require("sdk/tabs");
var data = require('sdk/self').data;
var worker;
var widget = require("sdk/widget").Widget({
    id: "mozilla-icon",
    label: "My Mozilla Widget",
    contentURL: "http://www.mozilla.org/favicon.ico"
    onClick: function() {
        worker = tabs.activeTab.attach({
            contentScriptFile: [data.url('jquery.js'),
                data.url('jquery-ui.js'),
                data.url('draggable.js')]
        });
        worker.port.on("anything", function(variable) {
            console.log("Got variable: "+variable);
        }
    }
});

$("#draggable").draggable();
self.port.emit("anything", variable);