2013-02-13 56 views
0

从简单地生成一个可拖动的框,并使用jquery-ui draggable()顶部的句柄开始。可拖动重影在jquery-ui不工作在IE8/9

但是,有时盒子内的内容可能会闪烁,这往往会导致拖动功能移动太慢。我决定移动到一个拖影的重像类型系统,它显示了一个你正在移动它的盒子,然后将它移到你放下它的位置。

我已经在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

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

试试这个..works在IE10

$(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/