在div内可调整大小和可拖动的图像 [英] Resizable and draggable images inside div

问题描述

如何让每张图片调整大小并可拖曳？

Bellow是一小段代码，可让使用者挑选他想要的图片显示。他们可以选择两个，尽可能多的他们想要的。

我想要做的是让用户调整div并将其拖动到div中。

div class =snippetdata-lang =jsdata-hide =falsedata-console =truedata-babel =false>

  .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/111.4/jquery-ui.js\"> ;</script> ;<div id =fotos> < img class =modal-contentid =imgdisplay/>< / div>< select id =imajes> < option value =>选择图片< / option> < option value =dog> Dog< / option>< / select>< select id =dogname =subselectorclass =subselectorstyle =display：none> < option value =>选择项目< / option> < option value =bulldog> Bulldog< / option>< / select>< div style ='display：none;'id =bulldogimgesclass =smallimages> < div class =imgcontainerssdata-image =https://torcdesign.com/clipart/pT78gE6pc.gif> < img src =https://torcdesign.com/clipart/pT78gE6pc.gifalt =Smiley facewidth =55height =55> < / div> < div class =imgcontainerssdata-image =https://torcdesign.com/clipart/LiKkRqkeT.gif> < img src =https://torcdesign.com/clipart/LiKkRqkeT.gifalt =Smiley facewidth =55height =55> < / div>< / div>  

解决方案

更新小提琴代码并添加可拖动和可调整大小的图片

需要点击图片将其放大并调整大小。

  $（document）.ready（function（）{$（'＃imajes'）。change function（）{$（'。subselector'）。hide（）; $（'。smallimages'）。hide（）; $（'＃'+ $（this）.val ; $（'。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（'< div class =imgdrag>< img class =modal-contentsrc ='+ $ this）.attr（'src'）+'/>< / div>'）; $（'。imgdrag'）。draggable（）; $（'＃fotos'）。droppable $（'。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 / javascriptsrc =http://ajax.googleapis.com/ajax /libs/jqueryui/1.7.2/jquery-ui.js\"> ;</script><link rel =stylesheettype =text / csshref =http://ajax.googleapis.com/ ajax / libs / jqueryui / 1.7.1 / themes / base / jquery-ui.css/>< div id =fotos>< img class =modal-contentid =imgdisplay/> ;< / div>< select id =imajes> < option value =>选择图片< / option> < option value =dog>狗< / option> < / select> < selection id =dogname =subselectorclass =subselectorstyle =display：none> < option value =>选择项目< / option> < option value =bulldog> Bulldog< / option> < / select>< div style ='display：none;'id =bulldogimgesclass =smallimages>< div class =imgcontainerssdata-image =https://torcdesign.com/clipart /pT78gE6pc.gif \"> < img src =https://torcdesign.com/clipart/pT78gE6pc.gifalt =Smiley facewidth =55height =55> < / div>< div class =imgcontainerssdata-image =https://torcdesign.com/clipart/LiKkRqkeT.gif> < img src =https://torcdesign.com/clipart/LiKkRqkeT.gifalt =Smiley facewidth =55height =55> < / div>< / div>  

How can I make each images resizable and draggable?

Bellow is a small piece of code that allows the user to pick and choose what image he or she would like to display. They can pick both and as many as they want.

What I want to do is for the user to resize and drag the image inside a 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>

解决方案

Update fiddle code and added draggable and resizable to image

Need to click on image to enlarge it and resize it.

$(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('<div class="imgdrag"><img class="modal-content" src="' + $(this).attr('src')+ '"/></div>'); $('.imgdrag').draggable();
$('#fotos').droppable();
	           $('.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" 
	src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" 
	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>

这篇关于在div内可调整大小和可拖动的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！