크롬 확장에 드래그 기능을 추가하는 방법은 무엇입니까?

일반적인 질문이지만 맞춤 크롬 확장에 드래그 기능을 추가하는 방법은 무엇입니까?크롬 확장에 드래그 기능을 추가하는 방법은 무엇입니까?

사용자 정의 크롬 내선을 구축 중입니다. 하지만 사용자가 주위에 그것을 드래그하고 싶습니다; 현재는 오른쪽 구석에 고정되어 있습니다.

"해자 (moat)"확장과 유사하길 바란다. 이 ext의 스크린 샷입니다. 및 URL.

는 단순히 JQuery와 UI를 추가하거나, 내가 뭔가 특별한 어떻게해야합니까인가?

는 I 100 % body 요소의 폭 및 높이를 설정하려고하므로 전체 페이지를 취하고 내선 인 body, 내부 div를 추가하고 z-index 1을 설정할 것이나,이 방법은 운동하지 않습니다. 본문의 너비와 높이가 확장되지 않고 확장 부분은 여전히 오른쪽 상단 모서리에 고정되어 있습니다.

필자는 요소를 검사하여 그 구석에서 '분리'할 수있는 방법을 찾을 수 있었지만 그 행운은 없었습니다.

크롬 확장 및 끌기 기능을 추가 한 경험이있는 사람이 있습니까? 다시 말하지만, 이것은 일반적인 질문입니다. 귀하의 도움을 주시면 감사하겠습니다.

출처

2017-01-03 medev21

jQuery UI의 일부인 대화 상자가 필요합니다. http://api.jqueryui.com/dialog/를 참조하십시오. 대화 상자 안에 원하는 HTML을 넣을 수 있습니다. – Sablefoste

실제로 여러 가지 방법으로 jQuery UI를 사용할 수 있습니다. 물론 Dialog 위젯은 훌륭하지만 화면 주위로 물건을 드래그하려는 경우 Draggable을 사용할 수 있습니다. 링크에서 실제 예제를 찾을 수 있습니다. 예를 들어

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

: 위의 코드는 위의 링크에서 찍은

<!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>

당신이 jQuery를 UI를 추가하면

, 그것은 단순히 한 줄입니다. jQuery.js와 jQuery-ui.js 파일을 포함 시켜서이 작업을 수행하십시오.

출처

2017-01-03 21:48:49 Sablefoste

크롬 확장에 드래그 기능을 추가하는 방법은 무엇입니까?

답변

관련 문제