jQuery .position() can I get the calc() value instead of the px value?

问题

I have a button that resizes a div from 200px - 290px

In this div elements exist that are positioned using calc(50% - 25px); 25px = half width of child - so they are positioned centrally.

I'm using jQuery's ui.swappable to swap elements, but the issue you is they seem to take on their calculated value permanently once swapped

pre-swap left:calc(50% - 25px); post-swap left:74px

Is there a way to swapping the calc(50% - 25px); instead of the value post calc?

$(this).position()

回答1:

Solved this.

Instead of swapping the positions of the elements, I used the following to extract the child html from the draggable droppable div's, and then append it into their respective div's, thus maintaining the calc() value.

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

Note: requires jQueryUI

来源：https://stackoverflow.com/questions/42834428/jquery-position-can-i-get-the-calc-value-instead-of-the-px-value

标签

jquery

css

position