div一起拖动而不是单独拖动

Question

当我试图找出如何做可拖动和可调整大小的时候我遇到了一个小问题，当我得到两个或更多的图像时，他们变成一个大的可拖动我想要单独拖动每个图像。

＆＃13;

＆＃13;

$(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();
           $('.modal-content').resizable();


});

  
  
});

＆＃13;

.imgcontainerss{
    float:left;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Resizable and draggable images inside div

Answer 1

您可以尝试更新代码，而不是一起移动：

$(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>