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

您需要某种方法来检测这些边缘。我在div内使用了一些孩子.drop-zone。接下来的问题是，您需要.drop-zone拥有position: relative，这会让拖放库变得混乱。我应用了here描述的修复程序。接下来，您会发现mouseover在拖动时不再传播.drag元素，因此您需要确保.drop-zone-edge div位于其上方，因此自定义z-index {1}}值。试一试here。对顶部，左侧和右侧应用相同的技术，使.drop-zone-edge透明。

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

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

1 个答案: