如何在可拖动元素中使用%代替px

How to use % instead of px with draggable element?

本文关键字：代替 px 元素 拖动      更新时间：2023-09-26

我被卡住了，我需要帮助。我正在用记号笔画地图。我可以添加标记等等。我的主容器有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>

如果你想捕获位置，在拖动结束后(每次拖动5次)，你可以这样做:

$('.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);
    }
});

这里小提琴

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

这个小计算需要考虑到地图偏移量，如果你的地图是全宽/全高(窗口大小)，你就不需要了

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

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

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

问题解决了，再次感谢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);
});
});
相关文章：