单击 DIV 或其子项时的 Jquery Draggable

标签 jquery jquery-ui jquery-ui-draggable jquery-draggable

当鼠标单击 div 的子级并让它拖动父级时,是否可以启用拖动功能?

在这个例子中,我试图让可拖动功能同时适用于 div 和 select。当您单击选择并尝试拖动时,没有任何反应。

http://jsfiddle.net/Trhs4/5/

<div id="draggable" class="ui-widget-content">
<select>
<option>Drag Me</option>
</select>
</div>

 $(function() {
     $( "#draggable" ).draggable();
 });

最佳答案

这是一个示例: LIVE DEMO

它与您的组合框不太兼容,因为它捕获鼠标单击事件来显示其选项,但它正在工作。

$(document).ready(function(){
      var click = false,
      top = null,
      left = null;

    $(document).bind('mousemove', function (e) {
        if (click == true) {
           $('#draggable').css({
             left: e.pageX - left,
             top: e.pageY - top
           });
        }
    });

    $('#draggable').draggable().click(function(e) {
        top = e.pageY - $('#draggable').position().top; 
        left = e.pageX - $('#draggable').position().left;
        click = !click;
        return false;
    });

    $('html').click(function() {
        click = false;
    });
});

关于单击 DIV 或其子项时的 Jquery Draggable,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15555555/

相关文章:

javascript - jquery: fadeOut().empty().append(...).fadeIn() 只有第一次不能正常工作

javascript - 限制 jQuery UI 可拖动移动到任意 "enclosure"

javascript - jQuery Draggable - 获取可拖动的 id

javascript - 元素在拖动后变得随机不可调整大小

javascript - 遍历设计糟糕的 API,其中对象键由文本和数字组成

javascript - 使用 nth-child if 语句更改 JQuery .append 输出

javascript - 重叠的 jquery 自动完成组合框

jquery - 拖放 - 当列表动态出现时可排序不起作用

javascript - jQuery 动画偏移/位置

javascript - 输入类型文件无法在angularjs中获取文件类型的文件名