이벤트를 DOM 요소에 바인딩 할 수 없습니다.

Question

나는 드래그 가능한 div를 만들려고합니다. 나는이 HTML로 이벤트 가로 채기 위해 몇 가지 코드를 작성하십시오 jsfiddle 여기

$(".draggable").bind("mousedown", function(e){ 
    e.preventDefault(); 
    console.log(e); 
    $(".draggable").bind("mousemove",function(e){ 
     var x = e.pageX; 
     var y = e.pageY; 
     $("#draggable").css({top: y, left: x}); 
    }); 
}); 
$(".draggable").bind("mouseup", function(e){ 
    e.preventDefault(); 
    $(".draggable").unbind("mousemove"); 
}); 
$(".draggable").bind("touchstart touchmove", function(e) { 
    e.preventDefault(); 
    var orig = e.originalEvent; 
    var x = orig.changedTouches[0].pageX; 
    var y = orig.changedTouches[0].pageY; 
    // Move a div with id "rect" 
    $(".draggable").css({top: y, left: x}); 
}); 

것 : 여기

<div class="draggable"> 
    <iframe id="frame" src="http://www.wikipedia.org"></iframe> 
</div> 

을 JS의 http://jsfiddle.net/xbv3opd7/34/

문제는 요소가 차단하지 않는 것이다 그 사건들. 이벤트를 문서에 바인딩하면 코드가 작동합니다. http://jsfiddle.net/xbv3opd7/35/

내가 잘못 들었습니까?

Answer 1

그렇다면 먼저 페이지에 jQuery-UI를 추가해야하기 때문입니다.

당신은 여기에서 다운로드 할 수 있습니다 :

http://jqueryui.com/download/ 그런 다음 당신은이 작업을 수행하여, 그것을 .draggable()을해야합니다

$(".draggable").draggable(); 

당신을 위해 작동하는 방법을 알려주세요.