jQuery .position() 我可以得到 calc() 值而不是 px 值吗？

Question

我有一个按钮可以将 div 的大小从 200px 调整到 290px

在这个 div 中存在使用 calc(50% - 25px); 定位的元素 25px = child 的一半宽度 - 所以它们居中放置。

我正在使用 jQuery 的 ui.swappable 来交换元素，但你的问题是它们似乎在交换后永久地采用它们的计算值

预交换 left:calc(50% - 25px); 交换后 left:74px

有没有办法交换 calc(50% - 25px);而不是计算后的值？

$(this).position()

Answer 1

解决了这个问题。

我没有交换元素的位置，而是使用以下方法从可拖放的 div 中提取子 html，然后将其附加到各自的 div 中，从而保持 calc() 值。

$( ".ClassofSwappableElement" ).draggable({
    stack: ".ClassofSwappableElement",
    distance: 0,
    revert: "invalid", 
    opacity: 0.5, 
    helper: "clone" 
});

$( ".ClassofSwappableElement" ).droppable({
    accept: ".ClassofSwappableElement",
    drop: function( evt, ui ) {

var draggable = ui.draggable,
    draggablebgc = ui.draggable.children().css('background-color'),
    draggablevalue = ui.draggable.attr('value'),
    droppable = $(this),
    droppablebgc = $(this).children().css('backgroundColor'),
    droppablevalue = $(this).attr('value');

draggable.attr('value', droppablevalue );
droppable.children('.ClassofChildYouWanttoChangeBgColorof').css({ backgroundColor: draggablebgc });
droppable.attr('value', draggablevalue );
draggable.children('.ClassofChildYouWanttoChangeBgColorof').css({ backgroundColor: droppablebgc });

var drophtml = droppable.html(),
    draghtml = draggable.html();

droppable.empty();
draggable.empty();
droppable.append(draghtml);
draggable.append(drophtml);

注意:需要 jQueryUI