Перетаскиваемые изображения, вырезанные по переполнению: прокрутка, приложение: тело / помощник: клон не работает

Я использую шаблон для производителя кукол для своего сайта, где изображения из одного <div> могут быть перетащены на другой <div>пустое место, чтобы одеть что-нибудь.

Я попытался установить изображение, содержащее <div> to overflow: прокрутка вместо переполнения по умолчанию: видимый, но изображения обрезаются при использовании прокрутки.

appendTo: body и helper: clone не сработали.

Любая помощь будет очень ценится, пожалуйста 🙂

HTML / PHP:

<div id="dollmaker_container">
<div id="bodyArea" class="ui-corner-all">
<img class="skintone" src="base/full/Base_Original_copy.png" alt="BaseBody" width="200" height="200">
</div>
<div id="swatchesArea" class="ui-corner-all">
<h3>Base:</h3>
<?php
/*Display the clickable thumbnails for the base variations (code for changing base is in JavaScript)*/
$images = scandir("base/thumbnails");
$ignore = Array(".", "..", ".htaccess", ".DS_Store");
foreach($images as $curimg){
if(!in_array($curimg, $ignore)) {
echo "<a href=\"base/full/".$curimg."\"><img src=\"base/thumbnails/".$curimg."\" alt=\"swatch\"></a>";
}
};
?>
</div>
<div id="piecesArea">

<?php
$folders = scandir("images/");
$ignore = Array(".", "..", ".htaccess", "BaseBody.gif", "title.png", ".DS_Store");

/*Display the tabs according to folder names*/
echo "<ul id=\"tabsbar\">";
foreach($folders as $key => $curfol){
if(!in_array($curfol, $ignore)) {
$curfol=ltrim($curfol,'1234567890');
$key = $key-1;
echo "<li><a href=\"#tabs-".$key."\">".$curfol."</a></li>\n";
}
};

echo "</ul>";

/*For each tab, display the props*/
foreach($folders as $key => $curfol){
if(!in_array($curfol, $ignore)) {
$key = $key-1;
echo "<div id=\"tabs-".$key."\">\n";

$images = scandir("images/".$curfol);
foreach($images as $curimg){
if(!in_array($curimg, $ignore)) {
echo "<img alt=\"\" src=\"images/".$curfol."/".$curimg."\">";
}
};echo "</div>\n";
}
};
?>
</div>

JS

$(document).ready(function() {

//Makes the pieces draggable & sets options
$("#piecesArea > div > img").draggable({
//Makes it so that the pieces' z-index can be reordered
stack: { group: '#piecesArea > div > img', min: 500,scroll: false },
distance: 0
});

//Sets what happens when you release a piece
$("#bodyArea").droppable({
drop: function(event, ui){
//this is so that the element "sticks" even when tab is changed.
ui.draggable.addClass("draggedout");
},
//changes current tab to the tab the piece belongs to when dragged out of body area
out: function(event, ui){
ui.draggable.removeClass("draggedout");
var whichTab = ui.draggable.parent().attr("id");
$("#piecesArea").tabs('select' , whichTab);
}
});

//tabs
$("#piecesArea").tabs();

//changes the body when thumbnails are clicked
$("#swatchesArea a").click( function() {
var changeSrc = $(this).attr("href");
$("#bodyArea>img").attr("src", changeSrc);
return false;
});

});