jqueryUI : div의 위쪽에 드래그 가능한 핸들이 숨겨져 있습니다

이것은 버그 일 수 있지만 잘못하고 있습니다.jqueryUI : div의 위쪽에 드래그 가능한 핸들이 숨겨져 있습니다

나는 JS Fiddle을 만드는 데 어려움을 겪었지만 슬프게도 제대로 작동한다. 그러나 정확한 코드를 사용하여 크롬에서 로컬로 실행하면 jqUI 핸들이 모두 엘리먼트 상단에 위치한다. 외부 가장자리? 여기에 바이올린이 있습니다.

정상적으로, 로컬에서 실행할 때이 동작의 화면 이미지가 포함됩니다.

핸들을 활용할 요소를 동적으로 만들 때 핸들을 유지하는 방법을 아는 사람이 있습니까?

Heres는 내가 함께 일하고 있어요 전체 소스 :

HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <link rel="stylesheet" href="/style/chat.css" type="text/css"/> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
     <script src="/scripts/test.js"></script> 
    </head> 
    <body> 
    </body> 
</html>

CSS

html, 
body { 
    height: 100%; 
    overflow: hidden; 
    margin:0; 
    padding:0; 
}

JS

$(document).ready(function(){ 
    let c = $('<div id="container" style="width: 75%; height: 75%; background-color: black;">'); 
    c.appendTo($('body')); 
    c.draggable({ 
     containment: 'body' 
    }); 
    c.resizable({ 
     handles: 'all' 
    }); 
});

로컬로 실행 할 때 제가 보는 동작의 이미지
. 당신은 내가 요소의 북쪽과 남쪽 핸들을 통해 이미지를 유혹하고있어 볼 수있는 것은 클릭 할 수 없습니다 ....

출처

2017-12-23 simon

//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css를 추가 했습니까? – beaver

아니요, 지금 시도하십시오. – simon

고정! 감사합니다. – simon

당신이, 당신의 프로젝트에 jquery-ui.css 참조를 추가해야 예 :

<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

출처

2017-12-23 09:21:43 beaver

jqueryUI : div의 위쪽에 드래그 가능한 핸들이 숨겨져 있습니다

답변

관련 문제