クロムエクステンションにドラッグ機能を追加する方法は？

これは一般的な質問ですが、カスタムクロムエクステンションにどのようにドラッグ機能を追加できますか？クロムエクステンションにドラッグ機能を追加する方法は？

カスタムクロームエクステンションを構築しています。私はユーザーにそれをドラッグするようにしたいと思います。現在は右隅に固定されています。

「Moat」拡張機能に似ていると思います（おなじみの方なら）。この内線のスクリーンショットです。およびURL。

それは単にjqueryのUIを追加して、または私は特別な何かをする必要がありますか？

私はそれがページ全体を取り、body内divを追加し、内線である、とz-index 1を設定しますので、body要素に幅と高さを100％に設定しようとしましたが、このアプローチがありますうまくいきません。ボディの幅と高さは拡張されておらず、拡張部分は右上の角に固定されています。

私は要素を調べて、そのコーナーから「切り離す」方法を見つけることができましたが、それに運がなかったのを見ました。

クロムエクステンションとドラッグ機能を追加した経験がありましたか？繰り返しますが、これは一般的な質問です。あなたの助けに感謝します。

出典

2017-01-03 medev21

jQuery UIの一部であるダイアログボックスが必要です。 http://api.jqueryui.com/dialog/を参照してください。ダイアログ内に好みのHTMLを置くことができます。 – Sablefoste

実際には、いくつかの異なる方法でjQuery UIを使用できます。もちろん、ダイアログウィジェットは素晴らしいですが、画面上でドラッグするだけの場合はDraggableを使用できます。このリンクには実例があります。

あなたはjQueryのUIを追加すると、それは単に1行である：上記のコードは、上記のリンクから取られた

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery UI Draggable - Default functionality</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <style> 
    #draggable { width: 150px; height: 150px; padding: 0.5em; } 
    </style> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    <script> 
    $(function() { 
    $("#draggable").draggable(); 
    }); 
    </script> 
</head> 
<body> 

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


</body> 
</html>

：たとえば

$('#yourSelectionID').draggable();

。 jQuery.jsファイルとjQuery-ui.jsファイルをインクルードしてこの作業を行うようにしてください。

出典

2017-01-03 21:48:49 Sablefoste

クロムエクステンションにドラッグ機能を追加する方法は？

答えて

関連する問題