jQuery UI의 draggable 기능에서 Scroll 오류 해결 방법

jQuery UI에서는 dom 요소에 대해 마우스로 쉽게 이동할 수 있도록 draggable 기능을 제공합니다. Windows 10에서는 문제가 없는데, Windows 7 등과 같은 버전에서는 이 draggable 기능 적용시 Scroll 기능에 오류가 있습니다. 즉, Scroll 기능이 작동하면 해당 dom이 계속 마우스에 붙어 따라다니는 기이한 현상이 발생합니다. 이에 대한 해결책은 아래의 코드와 같습니다.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
var containerDiv = $("#layerManager");
containerDiv.draggable({ handle: "#layerManagerTitle" });
var containerDiv = $("#layerManager"); containerDiv.draggable({ handle: "#layerManagerTitle" });
var containerDiv = $("#layerManager");
containerDiv.draggable({ handle: "#layerManagerTitle" });

위의 코드가 적용된 dom 요소의 구성은 아래 이미지와 같습니다.

즉, ID가 layerManager인 DIV에 draggable 기능을 적용어 이동시키되, ID가 layerManagerTitle인 DIV에 대해서만 draggable 적용을 받도록 하는 것입니다.

GeoService-Xr의 SQL 실행 서비스 호출 코드

GeoService-Xr에서 DBMS를 대상으로 Query 문을 호출하는 코드를 정리해 둡니다. GET 방식과 POST 방식 모두 적용할 수 있는데요. 먼저 POST 방식에 대한 예는 다음과 같습니다.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
sql = "SELECT USER_ID, SEC_NUM, NAM, EMAIL from web_user_man";
url = "http://168.192.76.103:8080/Xr?sql|BzSewage|1";
$.ajax({
url: url,
type: "POST",
crossDomain: true,
data: sql,
dataType: "text",
success: function (response) {
response = response.substr(0, response.length - 1); // data 문자열 끝에 \0 문자를 제거
response = JSON.parse(response);
// ...
},
error: function (xhr, status) {
alert("ajax error");
}
});
sql = "SELECT USER_ID, SEC_NUM, NAM, EMAIL from web_user_man"; url = "http://168.192.76.103:8080/Xr?sql|BzSewage|1"; $.ajax({ url: url, type: "POST", crossDomain: true, data: sql, dataType: "text", success: function (response) { response = response.substr(0, response.length - 1); // data 문자열 끝에 \0 문자를 제거 response = JSON.parse(response); // ... }, error: function (xhr, status) { alert("ajax error"); } });
sql = "SELECT USER_ID, SEC_NUM, NAM, EMAIL from web_user_man";
url = "http://168.192.76.103:8080/Xr?sql|BzSewage|1";
                        
$.ajax({
    url: url,
    type: "POST",
    crossDomain: true,
    data: sql,
    dataType: "text",
    
    success: function (response) {
        response = response.substr(0, response.length - 1); // data 문자열 끝에 \0 문자를 제거
        response = JSON.parse(response);

        // ...
    },

    error: function (xhr, status) {
        alert("ajax error");
    }
});

아래는 위와 동일한 SQL 문에 대해 GET 방식으로 호출한 예입니다.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
sql = "SELECT USER_ID, SEC_NUM, NAM, EMAIL from web_user_man";
url = "http://168.192.76.103:8080/Xr?sql|" + encodeURIComponent(sql) + "|BzSewage|1";
$.ajax({
url: url,
type: "GET",
crossDomain: true,
dataType: "text",
success: function (response) {
response = response.substr(0, response.length - 1); // data 문자열 끝에 \0 문자를 제거
response = JSON.parse(response);
// ...
},
error: function (xhr, status) {
alert("ajax error");
}
});
sql = "SELECT USER_ID, SEC_NUM, NAM, EMAIL from web_user_man"; url = "http://168.192.76.103:8080/Xr?sql|" + encodeURIComponent(sql) + "|BzSewage|1"; $.ajax({ url: url, type: "GET", crossDomain: true, dataType: "text", success: function (response) { response = response.substr(0, response.length - 1); // data 문자열 끝에 \0 문자를 제거 response = JSON.parse(response); // ... }, error: function (xhr, status) { alert("ajax error"); } });
sql = "SELECT USER_ID, SEC_NUM, NAM, EMAIL from web_user_man";
url = "http://168.192.76.103:8080/Xr?sql|" + encodeURIComponent(sql) + "|BzSewage|1";

$.ajax({
    url: url,
    type: "GET",
    crossDomain: true,
    dataType: "text",

    success: function (response) {
        response = response.substr(0, response.length - 1); // data 문자열 끝에 \0 문자를 제거
        response = JSON.parse(response);

        // ...
    },

    error: function (xhr, status) {
        alert("ajax error");
    }
});

이런 방식은 개발 단계에서 별도의 서버설정없이 바로 SQL 문을 실행할 수 있는데요. 최종적으로는 SQL 문을 이처럼 코드 단에 담기 보다는 GeoService-Xr의 SQL 실행 서비스의 방식으로 변경해 소스코드를 배포해야 합니다.