仅在单击父元素而不是其子元素时拖动答案

【问题标题】：Only drag when clicking a parent element, not its children仅在单击父元素而不是其子元素时拖动
【发布时间】：2014-01-14 10:55:37
【问题描述】：

我正在使用 jquery-ui 让我的 div 元素可拖动。它看起来像这样：

<div id="parent">
   <div id="child">
      //here is some stuff like tabs and other dynamic content
   </div>
</div>

所以父元素是可拖动的，即使我拖动 ID 为“子元素”的元素所占据的空间，我也可以拖动整个元素。单击子元素时我不想拖动

换句话说：

我想让我的父级成为其子元素的自然可拖动框架，但这个子级也不能触发父级可拖动。

【问题讨论】：

标签： javascript jquery html jquery-ui

【解决方案1】：

演示：http://jsfiddle.net/GbtUA/

你可以使用类似的东西：

       $('#parent').draggable({
          cancel : 'div#child'
       });

【讨论】：

【解决方案2】：

使用Cancel:

防止从指定元素开始拖动。

$('#parent').draggable({ cancel : '#child'});

jsFiddle：http://jsfiddle.net/hescano/dA4L9/

【讨论】：

【解决方案3】：

查看jQuery Draggable Handle Documentation。

你会看到一个你想要弄清楚的例子。

试试：

$(function() {
    $( "#parent" ).draggable({ cancel: "#child" });

    //Disable selection of text content within the set of matched elements.
    $( "div" ).disableSelection();
});

【讨论】：