2016-12-31 21 views
0

どのように各画像のサイズ変更とドラッグが可能ですか?div内のサイズ変更可能な画像とドラッグ可能な画像

ベローは、ユーザーが表示したい画像を選択して選択できるようにする小さなコードです。彼らは、彼らが望むだけで、両方を選ぶことができます。

私がしたいことは、ユーザーが画像のサイズを変更してdiv内にドラッグすることです。

$(document).ready(function() { 
 
    $('#imajes').change(function() { 
 
    $('.subselector').hide(); 
 
    $('.smallimages').hide(); 
 
    $('#' + $(this).val()).show(); 
 

 
    }); 
 

 
    $('.smallimages').hide(); 
 
    var id = $(this).attr('id'); 
 
    var val = $(this).val(); 
 

 

 
    $('#dog').on('change', function() { 
 

 
    $("#bulldogimges").css('display', (this.value == 'bulldog') ? 'block' : 'none'); 
 

 
    }); 
 

 
    $('img').on('click', function() { 
 
    $('#fotos').append('<img class="modal-content" src="' + $(this).attr('src') + '">'); 
 
    $('#fotos').draggable(); 
 
    $('#imgdisplay').resizable(); 
 

 
    }); 
 

 
});
.imgcontainerss { 
 
    float: left; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 

 
<div id="fotos"> 
 
    <img class="modal-content" id="imgdisplay" /> 
 
</div> 
 

 
<select id="imajes"> 
 
    <option value="">Choose Image</option> 
 
    <option value="dog">Dog</option> 
 

 
</select> 
 
<select id="dog" name="subselector" class="subselector" style="display:none"> 
 
    <option value="">Choose an item</option> 
 
    <option value="bulldog">Bulldog</option> 
 

 
</select> 
 

 

 
<div style='display:none;' id="bulldogimges" class="smallimages"> 
 
    <div class="imgcontainerss" data-image="https://torcdesign.com/clipart/pT78gE6pc.gif"> 
 
    <img src="https://torcdesign.com/clipart/pT78gE6pc.gif" alt="Smiley face" width="55" height="55"> 
 
    </div> 
 
    <div class="imgcontainerss" data-image="https://torcdesign.com/clipart/LiKkRqkeT.gif"> 
 
    <img src="https://torcdesign.com/clipart/LiKkRqkeT.gif" alt="Smiley face" width="55" height="55"> 
 
    </div> 
 
</div>

答えて

1

更新フィドルコードや画像

にドラッグしてサイズ変更が可能な追加それを拡大し、サイズを変更するには画像をクリックする必要があります。

$(document).ready(function() { 
 
    $('#imajes').change(function() { 
 
    $('.subselector').hide(); 
 
    $('.smallimages').hide(); 
 
    $('#' + $(this).val()).show(); 
 
\t 
 
    }); 
 
    
 
    $('.smallimages').hide(); 
 
    var id = $(this).attr('id'); 
 
    var val = $(this).val(); 
 
\t 
 
\t 
 
$('#dog').on('change', function() { 
 
    
 
    $("#bulldogimges").css('display', (this.value == 'bulldog') ? 'block' : 'none'); 
 

 
}); 
 

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

 

 
}); 
 

 
    
 
    
 
});
.imgcontainerss{ 
 
    float:left; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<script type="text/javascript" 
 
\t src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script> 
 
<link rel="stylesheet" type="text/css" 
 
\t href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/> 
 

 
<div id="fotos" ><img class="modal-content" id="imgdisplay" /></div> 
 

 
<select id="imajes"> 
 
     <option value="">Choose Image</option> 
 
     <option value="dog">Dog</option> 
 
     
 
    </select> <select id="dog" name="subselector" class="subselector" style="display:none"> 
 
    <option value="">Choose an item</option> 
 
    <option value="bulldog">Bulldog</option> 
 
    
 
</select> 
 

 

 
<div style='display:none;' id="bulldogimges" class="smallimages"> 
 
<div class="imgcontainerss" data-image="https://torcdesign.com/clipart/pT78gE6pc.gif"> 
 
    <img src="https://torcdesign.com/clipart/pT78gE6pc.gif" alt="Smiley face" width="55" height="55"> 
 
    </div> 
 
<div class="imgcontainerss" data-image="https://torcdesign.com/clipart/LiKkRqkeT.gif"> 
 
    <img src="https://torcdesign.com/clipart/LiKkRqkeT.gif" alt="Smiley face" width="55" height="55"> 
 
    </div></div>

+0

どのようなコードで間違っている可能性が?サイズ変更不可 – xcalliber

+0

答えには、コードサンプルに加えていくつかの説明が含まれている必要があります。コードのみの回答はあまり役に立たない。 –

+0

2つ目の画像をクリックすると別の問題に遭遇しました。両方の画像を同時に表示するのではなく、同時にドラッグします。 – xcalliber

関連する問題