HTML 페이지는 중앙에 드래그 가능한 사용자 정의 창을 표시합니다.

$(document).ready(function()
{
jQuery.fn.extend({
/ /드래그 앤 드롭 함수
drag:function(){
var $tar = $(this)
return $(this).mousedown(function(e){
if(e.target .tagName == "H2"){
var diffX = e.clientX - $tar.offset().left
var diffY = e.clientY - $tar.offset().top
$(document) .mousemove(function(e){
var left = e.clientX - diffX;
var top = e.clientY - diffY;
if (left < 0){
left = 0;
}
else if (left <= $(window).scrollLeft()){
left = $(window).scrollLeft()
}
else if (left > ; $(window).width() $(window).scrollLeft() - $tar.width()){
left = $(window).width() $(window).scrollLeft( ) -$tar .width();
}
if (top < 0){
top = 0
}
else if (top <= $(window). scrollTop()) {
top = $(window).scrollTop();
}
else if (top > $(window).height() $(window).scrollTop() - $ tar.height( )){
top = $(window).height() $(window).scrollTop() - $tar.height()
}
$tar.css("left ",left ' px').css("top",top 'px');
});
}
$(document).mouseup(function(){
$(this ).unbind("mousemove");
$(this).unbind("mouseup")
})
}
}); >});


여기에서는 클릭하고 드래그할 수 있는 div 콘텐츠의 H2 요소에만 중점을 둡니다. 전역 div가 필요한 경우 드래그 앤 드롭 원칙을 수정할 수 있습니다. 지정된 요소에서 마우스를 누르면 마우스 포인트의 좌표가 계산되어 해당 위치로 그림이 이동됩니다. 마우스 클릭이 취소되면 해당 누르기 이벤트도 취소되고 페이지는 그대로 유지됩니다.

이제 팝업 상자의 제목 표시줄을 클릭하여 브라우저에서 마음대로 끌 수 있습니다.