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

Droppable对象不可调整大小

1 个答案: