如何在可拖动元素中使用 % 而不是 px？

Question

我被困住了，我需要帮助。我正在用标记制作地图。我可以添加标记等。 我的主容器有 100% 的宽度和高度。当我单击某处时，我的标记具有 % 值，例如 top: 34%;左：35%； 拖动标记后新位置有 px 值。我想保存 % 值。 有什么想法吗？

map.js

jQuery(document).ready(function($){

// basic add

$("button#remove").click(function(){
$(".marker").remove();
});


//add with position
var map = $(".map");
var pid = 0;

function AddPoint(x, y, maps) {

    // $(maps).append('<div class="marker"></div>');
    var marker = $('<div class="marker ui-widget-content"></div>');
    marker.css({
        "left": x,
        "top": y
    });
    marker.attr("id", "point-" + pid++);
    $(maps).append(marker)
    $('.marker').draggable().resizable();
}
map.click(function (e) {
        // var x = e.pageX - this.offsetLeft;
        // var y = e.pageY - this.offsetTop;
        var x = e.offsetX/ $(this).width() * 100 + '%';
        var y = e.offsetY/ $(this).height() * 100 + '%';

        // $(this).append('<div class="marker"></div>');
        AddPoint(x, y, this);
});


// drag function
$(".ui-widget-content").draggable({
    drag: function( event, ui ) {
        var x = e.offsetX/ $(this).width() * 100 + '%';
        var y = e.offsetY/ $(this).height() * 100 + '%';
 }
});

});

style.css

.wrapper {
margin: 0 auto;
width: 100%;
min-height: 400px;
overflow: hidden;
}

.map {
width: 100%;
position: relative;
}

.map > img {
max-width: 100%;
max-height: 100%;
}
.marker {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 0, 0, 1);
position: absolute;
left: 50%;
top: 50%;
z-index: 999;
}

#mapa {
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(255, 0, 0, 1);
z-index: 999;   
}

一些html代码

    <div class="wrapper">
    <div class="map">
        <img src="http://i.imgur.com/HtxXGR5.jpg" width="100%" height="auto" margin="15px 0;" alt="">
    </div>
    <button id="remove">Remove all markers</button>
</div>

Answer 1

如果你想捕捉位置，在拖动结束后（每次拖动触发 1 次）你可以这样做：

$('.marker').draggable({
    stop: function() {
       var offset =  $(this).offset();
       var mapOffest = $('.map').offset();

       var x = ((offset.left - mapOffest.left)/ ($(".map").width() / 100))+"%";
       var y = ((offset.top - mapOffest.top)/ ($(".map").height() / 100))+"%";

       // We need to do something with thoses vals uh?
       $(this).css('left', x);
       $(this).css('top', y);
       // or
       console.log('X:'+x + '||Y:'+y);
    }
});

Fiddle here

请注意，事件已直接设置在标记上，这可能是您的错误。

小计算需要处理地图偏移量，如果您的地图是全宽/全高（窗口大小），则不需要这样做

如果您需要，或者更喜欢使用drag 事件而不是stop，这些行不会产生任何影响

$(this).css('left', x);
$(this).css('top', y);

但你仍然可以捕获位置，控制台值将是货物。

希望对你有帮助。

Answer 2

问题已解决，再次感谢 DFayet 最终代码

jQuery(document).ready(function($){

// basic add

$("button#remove").click(function(){
$(".marker").remove();
});


//add with position
var map = $(".map");
var pid = 0;

function AddPoint(x, y, maps) {

    var marker = $('<div class="marker"></div>');
    marker.css({
        "left": x,
        "top": y
    });
    marker.attr("id", "point-" + pid++);
    $(maps).append(marker);
    $('.marker').draggable({
        stop: function(event, ui) {
            var thisNew = $(this);

            var x = (ui.position.left / thisNew.parent().width()) * 100 + '%';
            var y = (ui.position.top / thisNew.parent().height()) * 100 + '%';

            thisNew.css('left', x);
            thisNew.css('top', y);

            console.log(x, y);
        }
    });
}
map.click(function (e) {
        var x = e.offsetX/ $(this).width() * 100 + '%';
        var y = e.offsetY/ $(this).height() * 100 + '%';
        AddPoint(x, y, this);
});

});