jquery动态位置变化

Question

我在我的 Web 应用程序中使用这个 jquery 颜色选择器插件 http://www.eyecon.ro/colorpicker/。我需要做一些设计调整。我将在应用程序上展示一些示例功能。请看这个http://jsfiddle.net/FSDPH/8/ 有一个带手风琴的可移动盒子。在颜色部分，我实现了无法在 jsfiddle 中显示的颜色选择器插件。 What I need is, when the color picker is selected and if the box is moved beyond the (document) section, the box and 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 属性在每次显示时在插件中计算。在您更改插件之前，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;
}