jquery Mouse drag

jquery Mouse drag

$(document).ready(function() {
var $dragging = null;
$(‘body’).on(“mousedown”, “div”, function(e) {
$(this).attr(‘unselectable’, ‘on’).addClass(‘draggable’);
var el_w = $(‘.draggable’).outerWidth();
var el_h = $(‘.draggable’).outerHeight();
$(‘body’).on(“mousemove”, function(e) {
if ($dragging) {
top: e.pageY – el_h / 2,
left: e.pageX – el_w / 2
$dragging = $(e.target);
}).on(“mouseup”, “.draggable”, function(e) {
$dragging = null;

Dom (Document Object Model)

The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page.

DOM은 플렛폼, 언어에 중립적인 인터페이스입니다.. 프로그램과 스크립트의 동적인 접근을 허용합니다. 문서의 내용, 구조, 스타일을 업데이트를 할 수 있습니다. 문서는 추가 처리가 가능합니다. 그 처리 결과를 페이지에 다시 혼합할 수 있습니다.

< http://www.w3.org/DOM >

DOM은 HTML 문서의 요소를 제어하기 위해 웹 브라우저에서 처음 지원되습니다. 브라우저 사이에 DOM 구현이 호환되지 않음에 따라, W3C에서 DOM 표준 규격을 작성하게 되었습니다.

< http://ko.wikipedia.org/wiki/%EB%AC%B8%EC%84%9C_%EA%B0%9D%EC%B2%B4_%EB%AA%A8%EB%8D%B8 >


DOM Tree 입니다. 이미지에서 사각형이 DOM(Document Object Model) 입니다.