無法將事件綁定到DOM元素

Question

我正在嘗試製作可拖動的div。我寫了一些代碼，以攔截與這個網站的事件：

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

這裏的JS：

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

讓我知道如何爲你工作。