由overflow溢出的可拖动图像：scroll，appendto：body / helper：clone not working

Question

我正在为我的网站使用一个玩偶制造商的模板，其中一个<div>的图像可以被拖到另一个<div>的空白区域来装扮。

我试图将包含<div>的图像设置为溢出：滚动而不是默认溢出：可见但是在使用滚动时图像会被切断。

appendTo：正文和帮助：克隆没有工作。

请非常感谢任何帮助：）

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;
});

});