자바 스크립트를 사용하여 드래그 가능한 DIV

드래그 가능한 div를 만들고 싶습니다 Jquery 플러그인을 사용하여이 작업을 수행 할 수 있음을 알고 있지만 드래그 가능한 기능 만 필요하기 때문에 사용하고 싶지 않습니다. 그래서 어떻게 드래그 기능 은 내가 한 한 할 수있는이자바 스크립트를 사용하여 드래그 가능한 DIV

$(document).ready(function(e){ 
       $("#eve").mousemove(function(e){ 
        var p=$(this); 
        var offset = p.offset(); 
        var ol=offset.left; 
        var ot=offset.top; 
        var l=e.pageX-ol; 
        var t=e.pageY-ot; 
        var eX=e.pageX; 
        var eY=e.pageY; 
        var htm="left:"+ol+" top:"+ot+"<br/>"; 
        htm+="eX:"+eX+" eY:"+eY+"<br/>"; 
        htm+="curX:"+l+" curY:"+t+"<br/>"; 
        htm+="l:"+(ol-l)+" t:"+(ot-t); 
        p.html(htm); 
        p.css({left:((eX-3))+"px",top:((eY-3))+"px"}); 
       });

출처

2012-06-05 Chetan Patel

코드는 무엇입니까? HTML은 어떻게 생겼습니까? – powtac

html에 하나의 DIV가 있습니다 –

jQuery UI의 드래그 가능한 구성 요소 만 사용할 수 있습니까? 끌기를 사용하기 위해 jQuery UI 전체를 다운로드 할 필요가 없습니다. 다운로드 페이지에서 원하는 구성 요소를 선택할 수있는 것 같습니다. – Aeolun

당신은 드래그 움직임을 처리 할 들고 뛰기 중지 드래그 mouseup을 시작하는 mousedown 이벤트를 처리하기 위해 여러 기능, 적절한 mousemove를 정의 할 필요가

, 이 요점을 확인해주세요. https://gist.github.com/1330150

출처

2012-06-05 12:06:09 Valerij

이 함수를 내 요소에 어떻게 적용합니까? –

사용 부분을 확인하십시오 - 요점의 첫 번째 5 행 – Valerij

괜찮습니다. –

여기 제가 빠른 즉흥적입니다. 어쩌면 이것이 정확히 당신이 찾고있는 것일 수 있습니다.

$("div").on({ 
    mousemove: function(e) { 
     var el = $(this); 
     var data = el.data("down"); 
     if (data) { 
      el.css({ 
       left: e.pageX - data.left, 
       top: e.pageY - data.top 
      }); 
     } 
    }, 
    mousedown: function(e) { 
     var el = $(this); 
     var pos = el.offset(); 
     el.data("down", { 
      left: e.pageX - pos.left, 
      top: e.pageY - pos.top 
     }); 
    }, 
    mouseup: function() { 
     $(this).data("down", false); 
    } 
});

DEMO :http://jsfiddle.net/UBKBb/

출처

2012-06-05 12:16:43 VisioN

자바 스크립트를 사용하여 드래그 가능한 DIV

답변

관련 문제