Question

使用jQueryUI的可拖动插件，我想让父容器中的任何拖动事件移动一个特定的单个子项，无论是否在子项上启动了click和drag事件。

HTML：

<div id="parent">
    <div id="child">Child</div>
</div>

CSS：

#parent {
    width: 100%;
    height: 400px;
    border: 1px solid red;
    overflow: hidden;
}

#child {
    width: 50%;
    height: 50%;
    background-color: green;
    cursor: move;
}

JS：

$(document).ready(function() {
    $('#child').draggable();
});

是否可以将父项的可拖动操作委托给孩子移动？

handle选项似乎可以解决，如果不是这个重要的警告：

如果指定，则限制从开始拖动，除非mousedown 发生在指定的元素上。 只有来自的元素允许使用可拖动元素。

API documentation中的任何其他内容似乎都没有指出这可能是开箱即用的，除非我完全遗漏了某些内容。

Answer 1

没有内置方法可以做到这一点。但你可以通过额外的div和一些jQuery和CSS获得类似的效果。

<强> jsFiddle example

<强> HTML

<div id="parent">
    <div id="child">Child</div>
    <div id="ghost"></div>
</div>

<强>的jQuery

var childX = 0,
    childY = 0;
$('#ghost').draggable({
    drag: function (event, ui) {
        $('#child').offset({
            top: childY + ui.offset.top,
            left: childX + ui.offset.left
        });
    },
    stop: function (event, ui) {
        $(this).offset({
            top: 0,
            left: 0
        });
        childX = $('#child').offset().left;
        childY = $('#child').offset().top;
    }
})

<强> CSS

#parent {
    width: 100%;
    height: 400px;
    border: 1px solid red;
    overflow: hidden;
    position:relative;
}
#child {
    width: 50%;
    height: 50%;
    background-color: green;
    cursor: move;
    position:relative;
    z-index:1;
    pointer-events:none;
}
#ghost {
    height:100%;
    width:100%;
    position:absolute;
    top:0;
}

Answer 2

由于triggering the drag event由于某种原因不再起作用，因此我想出了一个肮脏的黑客攻击。

JSFiddle

基本上我将一个子元素放入#child div并使用jQuery事件函数将它始终放在#parent div上。

function updatehack(e,ui)
{
    $('#hack').width($('#parent').width());
    $('#hack').height($('#parent').height());
    var p=$('#child').position();
    $('#hack').css('top',-p.top);
    $('#hack').css('left',-p.left);
}


$('#child').draggable({
    stop:updatehack   
});

使用jQuery UI的draggable，如何在父级中的任何位置拖动来移动孩子？

2 个答案: