javascript - jquery动态位置变化

Question

我正在使用这个 jquery 颜色选择器插件 http://www.eyecon.ro/colorpicker/在我的网络应用程序中。我需要做一些设计调整。我将展示应用程序的一些示例功能。请看这个http://jsfiddle.net/FSDPH/8/有一个带 Accordion 的可移动盒子。在颜色部分，我实现了无法在 jsfiddle 中显示的颜色选择器插件。我需要的是，当选择颜色选择器并且 box 移动到(文档)部分之外时，box 和 color picker palette 应动态更改其在文档区域内的位置。我已成功动态更改框位置，但无法使其适用于颜色选择器调色板。

这是 jquery 代码:(用于动态改变框和颜色选择器调色板位置)

var dwidth = $(document).width() - 225; // #box_bg width
$("#box_bg").draggable({
stop: function(event, ui) {
      var npos = $("#box_bg").position();
      if ( npos.left > dwidth)
      {
          $(".colorpicker").css("left","-133px!important");
          $("#box_bg").css("left", dwidth+"px");
      }
      } 
});

在上面的代码中，$("#box_bg") 在框移出文档区域时起作用。但它不适用于 $(".colorpicker") left 属性在 colorpicker.css 文件中没有改变。为什么会这样？

更新

这里我已经展示的比较清楚了，请看这个:)

http://jsfiddle.net/rkumarnirmal/4GrsD/3/

谁能指导我？

谢谢!

Answer 1

颜色选择器的左属性在插件中每次显示时都会计算。在您更改插件之前，left 属性将始终即时计算。

这是插件的代码:

show = function (ev) {
    var cal = $('#' + $(this).data('colorpickerId'));
    cal.data('colorpicker').onBeforeShow.apply(this, [cal.get(0)]);
    var pos = $(this).offset();
    var viewPort = getViewport();
    var top = pos.top + this.offsetHeight;
    var left = pos.left;
    if (top + 176 > viewPort.t + viewPort.h) {
        top -= this.offsetHeight + 176;
    }
    if (left + 356 > viewPort.l + viewPort.w) {
        left -= 356;
    }
    cal.css({left: left + 'px', top: top + 'px'});
    if (cal.data('colorpicker').onShow.apply(this, [cal.get(0)]) != false) {
        cal.show();
    }
    $(document).bind('mousedown', {cal: cal}, hide);
    return false;
}