Question

我想只有当鼠标位于此<div>内的第一个元素上时才能使<div>拖动。当鼠标不在第一个元素上时，整个<div>无法拖动。这是我的代码：

<div id="containers">
  <div id="cont1">foo</div>
  <div id="cont2">bar</div>
</div>

<script>
  $(document).ready(function() {
    $("#cont1").mouseenter(function() {
      $("#containers").draggable("enable");
    });
    $("#cont1").mouseleave(function() {
      $("#containers").draggable("disable");
    });
  });
</script>

当鼠标进入或离开#cont1时，控制台出错：

Uncaught TypeError: undefined is not a function(index):27 (anonymous function)jquery-1.11.0.js:4995 jQuery.event.special.(anonymous function).handlejquery-1.11.0.js:4624 jQuery.event.dispatchjquery-1.11.0.js:4292 elemData.handle

Answer 1

您正在寻找可拖动窗口小部件的handle选项：

＆＃13;

$("#containers").draggable({
  handle: "#cont1"
});

＆＃13;

#containers {
  height: 100px;
  background: grey;
}
#cont1 {
  width: 50px;
  height: 50px;
  background: dodgerblue;
}
#cont2 {
  width: 50px;
  height: 50px;
  background: #eee;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="containers">
  <div id="cont1">foo</div>
  <div id="cont2">bar</div>
</div>

＆＃13;

Answer 2

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<div id="containers" style="height: 200px;width: 200px;background-color: blanchedalmond">
    <div id="cont1">foo</div>
    <div id="cont2">bar</div>
</div>
<script>
$(document).ready(function() {
   $("#cont1").mouseenter(function() {
       $("#containers").draggable({ disabled: false });
   });
   $("#cont1").mouseleave(function() {
      $("#containers").draggable({ disabled: true });
   });
});
</script>

使用此代码。

仅当使用jQuery UI将鼠标悬停在特定元素上时才允许拖动

2 个答案: