可以在jquery-ui中使用重影拖拽在IE8 / 9中不起作用

时间:2013-02-13 21:35:36

标签: javascript jquery jquery-ui internet-explorer

首先使用jquery-ui draggable()生成一个可拖动的框和顶部的句柄。

然而,有时盒子内部的内容可能会闪烁,这往往会导致拖动功能移动得太慢。我决定转移到一个重影类型系统,你拖动它,它会显示一个框,你移动它,然后将它移动到你放弃它的位置。

我已经在Chrome / Firefox中完美运行,但无法在IE8或IE9中运行它。想知道是否有人有任何建议。下面是jquery特定代码。

$(document).ready(function () {
$container = $('#container');
$container.draggable({
    handle: "#header",
    containment: "parent",
    scroll: false,
    helper: function () {
        return "<div class='dragbox' style='width:" + ($container.width()) + "px;height:" + ($container.height()) + "px'></div>";
    },
    stop: function (e, ui) {
        var top = ui.position.top,
            left = ui.position.left;
        $container.css({
            'top': top + "px",
                'left': left + "px"
        });
    }
});
});

示例可在http://jsfiddle.net/Ep5wu/找到。

提前致谢!

1 个答案:

答案 0 :(得分:0)

拖拽停止事件中的参数'ui'是自身拖动的元素而不是'帮助'div(绿框)..拖动停止后你需要'帮助'的上/左值。

在IE10中试试这个..works

$(document).ready(function () {
        $container = $('#container');
        $container.draggable(
        {
            handle: "#header", scroll: false,       
            helper:function () {
                return "<div class='dragbox' style='width:" + ($container.width()) + "px;height:" + ($container.height()) + "px'></div>";
            },
            stop: function (e, ui) {
                console.log(ui.helper);
                var top = $(ui.helper).offset().top;
                var left = $(ui.helper).offset().left;
                $container.css({
                    'top': top + "px",
                    'left': left + "px"
                });
        }
            });
    });

在这里小提琴:http://jsfiddle.net/Ep5wu/16/