Question

我有以下（大大简化）HTML，由我无法控制的脚本生成：

<span style="display: inline-block; position: relative; width: 4em; height: 0px;">
    <span style="position: absolute; clip: rect(1em 1000em 2em -0.5em); top: -2em; left: 0;">
        <span>
            <span class="to-be-dragged" style="position: relative;">
                content
            </span>
        </span>
    </span>
</span>

我想用jQuery UI使.to-be-dragged可拖动。这样做的代码是这样的：

$(".to-be-dragged").draggable()

不幸的是，我的可拖动范围的父级之一具有clip属性。这会导致拖动的span在离开剪切区域时消失（因为overflow被隐藏为clip的要求）。我尝试删除父clip上的span，但这导致剪切的父span的大小增加，并掩盖了我需要保持可点击的现有内容。因此，clip属性必须保留或替换为具有相同效果的内容。

我不确定如何协调clip和jQuery UI可拖动，以便剪切的span保持剪裁/小，但可拖动的span可以拖出其父级。 / p>

Answer 1

我找到了解决方案！

我将helper: "clone"和appendTo: "#parent-div"添加到可拖动的属性中，然后将原始元素隐藏在可拖动的start方法中，并在stop方法中重新显示它。 #parent-div是顶级span所包含的分区。所以代码在CoffeeScript中看起来像这样：

target.draggable
    start: (event, ui) ->
        # Hide the original variable we are dragging.
        $(event.target).fadeTo(0, 0)

    stop: (event, ui) ->
        # Show the original variable we are dragging.
        $(event.target).fadeTo(0, 1)

    containment: "#parent-div"

    revert: true
    helper: "clone"
    appendTo: "#parent-div"

或者在JavaScript中：

target.draggable({
    start: function(event, ui) {
        return $(event.target).fadeTo(0, 0);
    },
    stop: function(event, ui) {
        return $(event.target).fadeTo(0, 1);
    },
    containment: "#parent-div",
    revert: true,
    helper: "clone",
    appendTo: "#parent-div"
});

使用CSS剪辑可拖动的jQuery UI

1 个答案: