时间戳

首页 > 解决方案 > jQuery可拖动元素在拖动后与可调整大小的父元素分离

jquery - jQuery可拖动元素在拖动后与可调整大小的父元素分离

问题描述

我有这个：

<style>
#pic_wrapper{
    display: block;
    position: relative;
    padding: 0;
}
#selected_picture img {
    width: 100%;
    height: auto;
}
.pin {
    display: none; 
    position: absolute; 
    height: 50px;
    width: 50px;
    padding: 0;
    margin: 0;
}
</style>

<div id="pic_wrapper">
    <div id="selected_picture">
        <img src="map.png" />
    </div>
</div>

并将标记附加到图像：

<script type="text/javascript" charset="UTF-8">
$(function(){
    $('#pic_wrapper').resizable();

    $('#selected_picture').on('click', function(e){
        x = ((e.offsetX) / $(this).width()) * 100 + "%";
        y = ((e.offsetY) / $(this).height()) * 100 + "%";
        var pin = $('<div class="pin"><img class="pin-img" src="<?php echo $imgURL; ?>pin.png" /></div>');
        pin.uniqueId();
        $('#pic_wrapper').append(pin);
        pin.draggable({containment: 'parent'});
        pin.css('left', x).css('top', y).show();

我需要将#selected_picture 与所有引脚一起缩放，以使它们保持在相同的相对位置（单击图像上的点）。

上面的方法适用于使用引脚调整包装器的大小，但仅在拖动任何引脚之前。拖动引脚后，它们会与父级分离并保持在固定位置，而不管调整包装器的大小。

拖动后如何使它们粘在父包装上？

请参阅小提琴 FYI：https ://jsfiddle.net/linuxoid/9w4y2cyp/

[解决了]

拖动停止后，位置设置为“px”，因此为了使其再次调整大小，我必须将“px”转换为“%”：

pin.on('dragstop', function(e){
    var $this = $(this);
    x = (($this.position().left) / $('#selected_picture').width()) * 100 + "%";
    y = (($this.position().top) / $('#selected_picture').height()) * 100 + "%";
    pin.css('left', x).css('top', y);
});

标签： jquerydraggableresizable

解决方案

推荐阅读