无法将事件绑定到 dom 元素答案

【问题标题】：Cannot bind event to a dom element无法将事件绑定到 dom 元素
【发布时间】：2014-09-25 17:22:56
【问题描述】：

我正在尝试制作一个可拖动的 div。我用这个 html 写了一些代码来拦截事件：

<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/

我哪里错了？

【问题讨论】：

抱歉，问题已编辑
问题与您使用的工具有关。您已从左侧菜单中选择 No wrap - in head，这会将您的代码放在页面顶部。
实际上有点莫名其妙你知道如何编写所有这些，但不是说 jQuery 使用document.ready 来确保 DOM 已准备好？

标签： javascript jquery html jquery-on

【解决方案1】：

是的，因为您首先需要将 jQuery-UI 添加到您的页面。

你可以在这里下载：http://jqueryui.com/download/

然后你需要通过这样做.draggable()：

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

让我知道这对你有什么作用。

【讨论】：