Question

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

这是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”），左属性在colorpicker.css文件中没有变化。为什么会这样？

更新

我已经更清楚地展示了这一点，请查看：）

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

有人可以指导我吗？

谢谢！

Answer 1

colorpicker的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;
}

jquery动态位置变化

1 个答案: