1

親内でドラッグとサイズ変更の両方に設定された標準のdivがあります。親にドラッグされるときに、divのサイズを変更できる必要があります。これは、垂直に下にドラッグしたときにのみ発生する必要があるため、次のように設定します。

$("#draggable").draggable({
    drag: function(event, ui) { AtBottom(); },
    axis:'y', containment:'parent'
});

次に、ドラッグ可能な要素とそのコンテナー (マイナス オフセット) の両方の下部の位置を計算し、大きい場合はサイズを変更します。

function AtBottom(){

    var Cpos = $('#Container').position();
    var cheight = $('#Container').height();
    var Boundry =  Cpos.top+cheight;

    var pos = $("#draggable").position();
    var height = $("#draggable").height();
    var bottom = pos.top+height+10; /*10 as offset */

    if(bottom>Boundry){

        $("#draggable").height((height-10));

    }

}

jqueryはドラッグ全体で要素のプロパティを保存し、再計算しないようです. ドラッグするたびに、高さが 10 ずつ減少します。

Jquery に強制的に位置を再計算させる方法はありますか? ->すでに有効/無効を試しました..

4

1 に答える 1

1

私はあなたがやっているように聞こえるものと同様のことをしなければなりませんでした。これは、ドラッグ可能な領域がコンテナーよりも大きいことに基づいて制約を作成することです (ドラッグ可能なマップのように)。jquery-ui.js を編集して、コンテインメントと同様に次のことを行いましたが、constraint と呼ばれます。

封じ込めのようにコードに設定します。

$("#draggable").draggable({
    axis: 'y',
    constraint: 'parent'
});

731行目:

constraint: false,

849行目:

//Set a constraint if given in the options
if(o.constraint)
  this._setConstraint();

1071行目:

  _setConstraint: function() {

    var o = this.options;
    if(o.constraint == 'parent') o.constraint = this.helper[0].parentNode;
    if(o.constraint == 'document' || o.constraint == 'window') this.constraint = [
      0 - this.offset.relative.left - this.offset.parent.left,
      0 - this.offset.relative.top - this.offset.parent.top,
      $(o.constraint == 'document' ? document : window).width() - this.helperProportions.width - this.margins.left,
      ($(o.constraint == 'document' ? document : window).height() || document.body.parentNode.scrollHeight) - this.helperProportions.height - this.margins.top
    ];

    if(!(/^(document|window|parent)$/).test(o.constraint) && o.constraint.constructor != Array) {
      var ce = $(o.constraint)[0]; if(!ce) return;
      var co = $(o.constraint).offset();
      var over = ($(ce).css("overflow") != 'hidden');

      this.constraint = [
        co.left + (parseInt($(ce).css("borderLeftWidth"),10) || 0) + (parseInt($(ce).css("paddingLeft"),10) || 0) - this.margins.left,
        co.top + (parseInt($(ce).css("borderTopWidth"),10) || 0) + (parseInt($(ce).css("paddingTop"),10) || 0) - this.margins.top,
        co.left+(over ? Math.max(ce.scrollWidth,ce.offsetWidth) : ce.offsetWidth) - (parseInt($(ce).css("borderLeftWidth"),10) || 0) - (parseInt($(ce).css("paddingRight"),10) || 0) - this.helperProportions.width - this.margins.left,
        co.top+(over ? Math.max(ce.scrollHeight,ce.offsetHeight) : ce.offsetHeight) - (parseInt($(ce).css("borderTopWidth"),10) || 0) - (parseInt($(ce).css("paddingBottom"),10) || 0) - this.helperProportions.height - this.margins.top
      ];
    } else if(o.constraint.constructor == Array) {
      this.constraint = o.constraint;
    }

  },

_generatePosition 関数の 1142 行目:

  if(this.constraint) {
    if(event.pageX - this.offset.click.left > this.constraint[0]) pageX = this.constraint[0] + this.offset.click.left;
    if(event.pageY - this.offset.click.top > this.constraint[1]) pageY = this.constraint[1] + this.offset.click.top;
    if(event.pageX - this.offset.click.left < this.constraint[2]) pageX = this.constraint[2] + this.offset.click.left;
    if(event.pageY - this.offset.click.top < this.constraint[3]) pageY = this.constraint[3] + this.offset.click.top;
  }
于 2010-09-28T21:27:36.870 に答える