首先使用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/找到。
提前致谢!
答案 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"
});
}
});
});