자바 스크립트를 사용하여 구성 요소별로 창 끌기

Question

HTML, CSS 및 Javascript와 함께 TideSDK를 사용하여 Windows 응용 프로그램을 개발했습니다. 위젯보기를 제공하기 위해 제목 표시 줄이 사라졌습니다. TideSDK 설명서에 나와 있습니다. "제목 표시 줄이 사라진 후에는 javascript로 내용을 사용하여 창을 끌 수 있습니다."

자바 스크립트로 구성 요소 (내 경우에는 타일)를 선택하여 창을 끌 수있는 방법은 무엇입니까? 자습서 또는 코드는 Google에서 검색 할 때 아무 것도 찾지 않았습니다. 내가 JS를 사용하여 드래그를 위해 다음과 같은 일반적인 기능을 작성했습니다

Answer 1

: 아래와 같은

내 앱 보인다

function setDragOfElementOnAnother ($draggableElement, $draggedElememnt, allowDragPredicate) { 
    var stopDragFunction = function() { 

     $draggedElememnt.data("drag", false); 
     $draggedElememnt.removeData("startPoint"); 

     $("html, body").unbind("mouseup.drag"); 
     $("html, body").unbind("mousemove.drag"); 
    }; 
    var dragFunction = function(e) { 
     if (!parseBoolean($draggedElememnt.data("drag"))) 
      return; 

     var begin = $draggedElememnt.data("startPoint"); 

     $draggedElememnt.css({ left: e.clientX - begin.x, top: e.clientY - begin.y  }); 
    }; 

    $draggableElement.mousedown(function(e) { 

     if ((e.clientX - $(this).offset().left < 0 || $(this).offset().left +  $(this).width() < e.clientX) || 
      e.clientY - $(this).offset().top < 0) 
      return; 

     if (allowDragPredicate && !allowDragPredicate(e)) 
      return; 

     $draggedElememnt.data("drag", true); 
     $draggedElememnt.data("startPoint", Point(e.clientX - $(this).offset().left, e.clientY - $(this).offset().top)); 

     $("html, body").bind("mouseup.drag", stopDragFunction); 
     $("html, body").bind("mousemove.drag", dragFunction); 
    }); 

    $draggableElement.mouseup(stopDragFunction); 
    $draggableElement.mousemove(dragFunction); 

} 

이 기능은 다른을 사용하여 하나의 요소에서 드래그 선언하는 데 사용됩니다.
전제 : 1 드래그 된 소자의 위치가 고정 또는 절대 (상대 해야 또한 작동) 될 하나 갖는다. (2) jQuery.

드래그 한 요소와 드래그 할 수있는 요소를 같은 것으로 지정하면 요소를 누르고 마우스를 움직이면 요소가 드래그됩니다.

'allowDragPredicate'변수는 선택 사항이며 경계를 만드는 데 유용합니다.

편집 : 잊어 버렸습니다.

function Point(xVal, yVal) { 

    if (xVal === undefined) { 
     xVal = 0; 
    } 
    if (yVal === undefined) { 
     yVal = 0; 
    } 
    return { 
     x: xVal, 
     y: yVal 
    }; 
} 

EDIT 2 : : 그리고

function parseBoolean(str) { 
    if (str === true) 
     return true; 
    if (str) 
     return /^true$/i.test(str); 
    return false; 
} 

EDIT 3 : 또한 코드를 추가하고, 간단한 jsFiddle 예를 첨가.