我有一个按钮,可以从200px - 290px
调整div的大小在此div中存在使用calc(50% - 25px);
定位的元素
25px = half width of child
- 所以他们是集中的。
我正在使用jQuery的ui.swappable来交换元素,但问题是他们似乎在交换后永久性地采用了他们的计算值
交换前left:calc(50% - 25px);
交换后left:74px
有没有办法交换计算(50% - 25px);而不是post calc?的值?
$(this).position()
答案 0 :(得分:0)
解决了这个问题。
我没有交换元素的位置,而是使用以下内容从可拖动的droppable 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