div 드래그 가능 축소 가능

전언

개발 과정에서 컨트롤러 기능을 실현해야 합니다. 컨트롤러의 도표를 드래그하고 축소할 수 있습니다. 도표의 생성은 iframe 라벨로 다른 내부 시스템을 연결하여 생성하는 것입니다. 따라서 외곽div를 드래그하고 축소할 수 있도록 해야 합니다.

코드

1. 기능 구현 코드

$(function() {
	$(document).mousemove(function(e) {
		if (!!this.move) {
			var posix = !document.move_target ? {'x': 0, 'y': 0} : document.move_target.posix,
				callback = document.call_down || function() {
					$(this.move_target).css({
						'top': e.pageY - posix.y,
						'left': e.pageX - posix.x
					});
				};

			callback.call(this, e, posix);
		}
	}).mouseup(function(e) {
		if (!!this.move) {
			var callback = document.call_up || function(){};
			callback.call(this, e);
			$.extend(this, {
				'move': false,
				'move_target': null,
				'call_down': false,
				'call_up': false
			});
		}
	});

	var $box = $('.box').mousedown(function(e) {
	    var offset = $(this).offset();
	    
	    this.posix = {'x': e.pageX - offset.left, 'y': e.pageY - offset.top};
	    $.extend(document, {'move': true, 'move_target': this});
	}).on('mousedown', '.coor', function(e) {
			var fBox = $(this).parent();
		
	    var posix = {
	            'w': fBox.width(), 
	            'h': fBox.height(), 
	            'x': e.pageX, 
	            'y': e.pageY
	        };
	    
	    $.extend(document, {'move': true, 'call_down': function(e) {
	    	fBox.css({
	            'width': Math.max(30, e.pageX - posix.x + posix.w),
	            'height': Math.max(30, e.pageY - posix.y + posix.h)
	        });
	    }});
	    return false;
	});
});

2. 페이지 사용 코드