2017-02-19 7 views
1

私はギャラリーから画像を選択するたびに少し問題に遭遇しました画像はコンテナに表示されます私はコンテナ内の画像をサイズ変更してドラッグできます問題は画像をドラッグするときですコンテナを越えたイメージは、コンテナのイメージを右に止めることです。私はそれを隠したくありません。どのようにこれを可能にすることができますか?ここで私は持っていけない私は何を持っていることはただコンテナjqueryにdraggableを追加します

$('img').on('click', function() { 
 
    $('#fotos').append('<div class="imgdrag"><img class="modal-content" src="' + $(this).attr('src') + '"/></div>'); 
 
    $('.imgdrag').draggable({appendTo: $(".container5")}); 
 
    $('#fotos').droppable(); 
 
    $('.modal-content').resizable(); 
 

 
    $(".download").attr("href", $(this).attr('src')); 
 
    $(".download").show(); 
 
    });
.container5 { 
 
    background-color: transparent; 
 
    width: 220px; 
 
    height: 320px; 
 
    margin: auto; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    border: 1px solid red; 
 
    position: absolute; 
 
    overflow: hidden; 
 
}
<div id="boxes" class="container5" style="float:center;"> 
 
<div id="fotos" class="bananas"><img class="modal-content" id="imgdisplay" /></div></div>

答えて

0

が封じ込めオプションを見てくださいスクリプトといくつかのCSSとHTMLを投稿しようとしてイムコーディングの多くを必要としますbeacause取り組んでドラッグ可能サイズ変更可能な場合は、サイズ変更可能なものを保持するセレクタを入力することができます。それは親要素内に留まるよう あなたも親の文字列を使用することができ

例えば

$('.modal-content').resizable({ 
     containment: "parent" 
}); 
+0

それはまだjsfiddle [ここ]を見てください –

+0

コンテナに隠れこのdidntの仕事(HTTPS:/ /jsfiddle.net/mgoo/x06dg7ec/)の完全な例を参照してください。あなたはドキュメント[ここ](http://api.jqueryui.com/resizable/#option-containment)を見ることもできます。 –

関連する問題