当我在其上放置图像时使 div 可扩展

Question

查看这个fiddle，在这里我可以将图像拖放到.drop-zone，但我想改进它，如果我将图像拖到它上面，.drop-zone div 会扩展到我放置的位置图片。可滚动就好了。

<div class="drag"><img src="http://www.causingeffect.com/images/made/images/example/cow_50_50_c1.jpg" /></div>
<div class="drag"><img src="http://www.coffeecup.com/images/software/feature-icons/image_editing.png" /></div>
<div class="drag"><img src="http://www.neatimage.com/im/Neat-Image-Logo-64.png" /></div>

<div class="clear"></div>

<div class="drop-zone"></div>

JS

jQuery(function($) {

    $('.drop-zone').droppable({
        accept: '.drag',
        drop: function(event, ui) {
            var $clone = ui.helper.clone();
            if (!$clone.is('.inside-drop-zone')) {
                $(this).append($clone.addClass('inside-drop-zone').draggable({
                     containment: '.drop-zone'
                }));
            }
        }
    });

    $('.drag').draggable({
        helper: 'clone'
    });

});

CSS

.drop-zone{border: 1px solid #9C9898;height:350px;width:400px;margin:0 auto;margin-top: 10px; overflow:auto;}
.clear{clear:both;}

Answer 1

您需要一些方法来检测这些边缘。我在.drop-zone 中使用了一些孩子divs。下一个问题是您需要.drop-zone 才能拥有position: relative，这会弄乱拖放库。我应用了here 中描述的修复程序。 接下来，您会发现mouseover 在拖动时不再通过.drag 元素传播，因此您需要确保.drop-zone-edge divs 在其上方，因此自定义z-index 值。试试看here。 对顶部、左侧和右侧应用相同的技术并使.drop-zone-edges 透明。

HTML：

<div class="drop-zone">
    <div class="drop-zone-edge drop-zone-top"></div>
    <div class="drop-zone-edge drop-zone-bottom"></div>
</div>

CSS：

.drag {
  z-index: 100;
}

.drop-zone-edge {
    width: 100%;
    height: 10px;
    background-color: red;
    position: absolute;    
    z-index: 200;
}

.drop-zone-top {
    top: 0;
}

.drop-zone-bottom {
    bottom: 0;
}

JS：

var isDown = false;

$(document).mousedown(function() {
    isDown = true;
})
.mouseup(function() {
    isDown = false;
});

$('.drop-zone').droppable({
    accept: '.drag',
    drop: function(event, ui) {
        var $clone = ui.helper.clone();
        if (!$clone.is('.inside-drop-zone')) {
            $(this).append($clone.addClass('inside-drop-zone').draggable({
                 containment: '.drop-zone'
            }));
        }
        var parent = $('.drop-zone');
        var leftAdjust = $clone.position().left - parent.offset().left;
        var topAdjust = $clone.position().top - parent.offset().top;
        $clone.css({left: leftAdjust, top: topAdjust});
    }
});

$('.drag').draggable({
    helper: 'clone'
});

var shouldEnlargeBottom = false;
$('.drop-zone-bottom').on('mouseover', function(e) {
    if(isDown) {
        shouldEnlargeBottom = true;
    }
});

$('.drop-zone-bottom').on('mouseout', function(e) {
    shouldEnlargeBottom = false;
});

function enlarge() {
    if(shouldEnlargeBottom) {
        var newHeight = $('.drop-zone').height() + 3;
        $('.drop-zone').height(newHeight);
    }
}

setInterval(enlarge, 100);