将jQuery qTip放在jqueryUI-Draggable中

时间:2013-05-30 07:47:06

标签: jquery twitter-bootstrap jquery-ui-draggable qtip

我在Asp.Net Web应用程序中使用qTip表单验证程序在jqueryUI可拖动Bootstrap模式中遇到问题。作为要求,我使用jqueryUI Draggable使引导模式可拖动。问题是,如果工具提示处于活动状态并且我们拖动了引导程序模式,则qtip将不会随Screenshot中显示的模态一起移动。我使用以下qTip设置:

var q = $(inputs).qtip({
    position: {
        my: 'center left',
        at: 'center right'
    },
    content: {
        text: function (api) {
            return getValidator.call(this).html();
        }
    },
    show: {
        ready: true,
        event: 'none'
    },
    hide: {
        event: 'none'
    },
    style: {
        classes: 'ui-tooltip-red ui-tooltip-shadow ui-tooltip-rounded'
    },
    events: {
        show: function (event, api) {
            var $this = api.elements.target;
            var validator = getValidator.call($this);
            if (validator.length == 0)
                event.preventDefault();
        }
    }
});

我尝试使用type: 'relative',container: $(this).parent(),作为该职位。但是qtip仍然没有动摇。

我正在使用以下来移动引导模式,它正在按预期工作。

    $(".modal").draggable({
            handle: ".modal-header",
            containment: "body"
        });

欢迎提出建议/解决方案。

1 个答案:

答案 0 :(得分:1)

这不会起作用,因为如果你仔细观察DOM,实际的qtip元素会被附加到正文,而不管你初始化它的元素。因此它不会出现在你的可拖动div中,也不会被拖动。

我最好的选择是在拖动开始时隐藏qtip错误消息,并在拖动停止时重新渲染它们。