Невозможно связать событие с элементом dom

Question

Я пытаюсь сделать перетаскиваемый div. Я написал код для перехвата событий с этим HTML:

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

Вот в ЯШ:

$(".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}); 
}); 

Вот такой jsfiddle: http://jsfiddle.net/xbv3opd7/34/

Вопрос заключается в том, что элемент, кажется, не перехватывать события. Код работает, если я привяжу событие к документу: http://jsfiddle.net/xbv3opd7/35/

Где я ошибаюсь?

Answer 1

Да, потому что сначала вам нужно добавить jQuery-UI на свою страницу.

Вы можете скачать его здесь: http://jqueryui.com/download/

Тогда вам нужно сделать это .draggable(), делая это:

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

Позвольте мне знать, как это работает для вас.