无法将事件绑定到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(); 

让我知道如何为你工作。