Question

我试图制作一个可拖动的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});
});

这是一个小伙伴：http://jsfiddle.net/xbv3opd7/34/

问题是该元素似乎没有拦截事件。如果我将事件绑定到文档：http://jsfiddle.net/xbv3opd7/35/

，则代码可以正常工作

我哪里错了？

Answer 1

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

您可以在此处下载：http://jqueryui.com/download/

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

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

让我知道这对你有用。

无法将事件绑定到dom元素

1 个答案: