可下垂对象不可调整大小

Question

我试图拖放图像，并使克隆的可下垂的图像在下降后可调整大小，没有任何运气.

我的代码是：

<img class="dragger" id="obj1" style="cursor: -webkit-grab;float:left; margin-left:5px; margin-top:5px;" src="objects/bike.png" width="80" height="80">


<img class="dragger" id="obj2" style="cursor: -webkit-grab;float:left; margin-left:5px; margin-top:5px;" src="objects/car.png" width="80" height="80">


//The dropable div
<div id="contentHolder"></div>

Jquery代码：

<script>
$(document).ready(function() {

window.zindex = 999;

    //$(".dragger").resizable({handles: 'ne, se, sw, nw'});

    $(".dragger").draggable({       
    helper: "clone" 
    }).on('dragstop', function (event, ui) {
    $(this).after($(ui.helper).clone().draggable());        
    });



$("#contentHolder").droppable({
   drop: function(event, ui) {


var id = ui.draggable;

 if(ui.draggable.hasClass("dragger")) {

    $(".dragger").each(function(i) {
    $(this).attr('id', "dragger" + (i + 1));
    $(this).removeClass( "dragger" ).addClass("dragger" + (i + 1));
    $("dragger" + (i + 1)).resizable({handles: 'ne, se, sw, nw'});
    });


 }


      }    

 });

})；

有什么建议可以解释为什么我的克隆掉下来的图像不能调整大小？

Answer 1

那么，您已经有了很多额外的代码，但是问题的根源在于，当jQuery使您的克隆可拖放时，它正在将您的图像包装在div中，而图像的可调整大小部分实际上在该div元素中。

解决方案是在图像周围添加一个包装器元素，然后使克隆的元素可拖动，其中的图像可调整大小。还需要将display: inline-block;添加到拖动的克隆的CSS中，以便外部div在调整大小时自然地围绕img元素形成自身。

此外，要使这一切正确触发，您需要将所有这些绑定到可拖放元素的stop事件，而不是绑定到可下垂元素的drop事件。

HTML：

<div class="dragger">
    <img id="obj1" src="http://placehold.it/80x80" />
</div>
<div class="dragger">
    <img id="obj2" src="http://placehold.it/80x80" />
</div>
<div id="contentHolder"></div>

CSS：

#contentHolder {
    display: block;
    width: 100%;
    min-height: 500px;
    border: 2px dashed #999;
}
.dragger, .dragger-clone {
    cursor: -webkit-grab;
    display: inline-block;
}

jQuery：

$(document).ready(function () {
    $(".dragger").draggable({
        containment: 'html',
        helper: 'clone',
        stop: function (event, ui) {

            /* First, make the clone and append it 
             * to the droppable container
             */
            $(ui.helper)
                .clone(true)
                .removeClass('ui-draggable-dragging')
                .addClass('dragger-clone')
                .appendTo('#contentHolder');

            /* Next, make the clone draggable and 
             * contained by the droppable container
             */
            $(".dragger-clone")
                .draggable({ containment: '#contentHolder' });

            /* Now, make the image within the clone resizable
             */
            $(".dragger-clone img")
                .resizable({handles: 'ne, se, sw, nw'});
        }
    });
    $("#contentHolder").droppable();
});

JSFiddle在这里..。