div内にアイテムをドラッグして制限に達すると、divが表示されます

マイページにドラッグ可能でサイズ変更可能なアイテム（div）がいくつかあります。これを行うための私のコードは以下の通りです：div内にアイテムをドラッグして制限に達すると、divが表示されます

<body> 
<div id="wrapper"> 
    <div class="draggableItem"></div> 
    <div class="draggableItem"></div> 
    <div class="draggableItem"></div> 
    <div class="draggableItem"></div> 
</div> 
</body>

私のCSSファイルでは、私が設定した身長：100％とラッパーの高さ：

part.draggable(
        { 
           containment: 'parent', 
           drag: function(event, ui){ 
           partIsDragging = true 
           part.prev().css('top', ui.position.top - 20).css('left', ui.position.left) 
           part.prev().show() 
          }, 
           stop: function(event, ui) { 
             partIsDragging = false 
          } 
           }).resizable({ 
           containment: 'parent', 
           handles: 'ne, se, sw, nw,n,w,e,s', 
           stop: function() { 
              }           
           });

これらのHTML構造は次のとおりです。100 ％。ラッパーの幅は常に固定です（幅：950ピクセル）。 draggableItemがラッパーの一番下に達すると、divの高さが拡大されます。今すぐページが読み込まれるときに、解像度が可能な限り大きな高さを持っていますが、ラッパーに複数のアイテムがある場合は、すべてが乱雑になり、アイテムを何かにドラッグして高さを動的に拡張したいと思います。これは、私が下の境界線に当たった場合にのみ起こるはずです。

PS：jQueryとjQuery-uiを使用しています。

出典

2011-08-11 user253530

あなたの関連するCSSも投稿できます –

解決策がある可能性があります。まず、partを'.draggableItem'と置き換え、適切な場合はthisと置き換えました。それがコードをいくつかの重要な方法で破るかどうか教えてください。また、以下のコードでpart.prev().css('top', ui.position.top - 20).css('left', ui.position.left)を削除しました。

function adjustWrapperHeight(movingObject) 
{ 
    var objectBottomPosition = $(movingObject).offset().top+$(movingObject).height() 
    var wrapperBottomPosition = $("#wrapper").offset().top+$("#wrapper").height() 
    if(wrapperBottomPosition-objectBottomPosition<distanceBuffer) 
    { 
     $("#wrapper").height($("#wrapper").height()+distanceBuffer+1) 
    } 
} 

var distanceBuffer = 20; 
$('.draggableItem').draggable(
     { 
      containment: 'parent', 
      drag: function(event, ui) 
      { 
       partIsDragging = true 
       adjustWrapperHeight(this) 
      }, 
      stop: function(event, ui) 
      { 
       partIsDragging = false 
      } 
     }).resizable(
     { 
      handles: 'ne, se, sw, nw,n,w,e,s', 
      resize: function(event, ui) 
      { 
       adjustWrapperHeight(this) 
       var objectRightPosition = $(this).offset().left+$(this).width() 
       var wrapperRightPosition = $("#wrapper").offset().left+$("#wrapper").width() 
       if(wrapperRightPosition<=objectRightPosition) 
       { 
        $(this).width(ui.originalSize.width) 
        var containmentLeftPosition = wrapperRightPosition-$(this).width() 
        $(this).offset({top:$(this).offset().top,left:containmentLeftPosition}) 
       } 
      }          
     }) 
     })

機能adjustWrapperHeight(movingObject)はS底位置div#wrapper 'movingObjectに応じSの高さを' 調整します。つまり、movingObjectがdiv#wrapperの境界線に対して「プッシュアップ」すると、div#wrapperの高さが調整されます。

私はresizableのハックを使用しなければなりませんでした。 resizableのcontainment: 'parent'（ただしdraggableは含まれません）は、コンテナのコンテナをORIGINALの高さに設定します。つまり、div#wrapperの高さが動的に変化すると、containment: 'parent'で設定された制約は動的に変更されません。この問題を解決するには、containment: 'parent'と実際にはcontainmentを削除し、resizeイベント内でdiv#wrapperの右の包含が壊れていないことを確認しました。これはおそらくdiv#wrapperの左囲みで行うべきであることに注意してください。

これが参考になった場合は教えてください。ありがとうございました。

出典

2011-08-12 00:49:33

あなたのソリューションはうまくいきました！あなたが作ったこの素晴らしいことに感謝します！ドラッグ可能でサイズ変更が必要な複数のラッパーとdivを扱っているので、サイズを変更する必要があるラッパーオブジェクトであるadjustWrapperHeight関数に別の引数を追加する必要があったため、スイートにコードを調整しました。 – user253530

div内にアイテムをドラッグして制限に達すると、divが表示されます

答えて

関連する問題