Question

我在一条水平线上有以下DOM元素：

包含一行文字的div;即“Hello world”。此div的宽度与包含文本的宽度相同。
用于交换两个div的按钮。
包含列表框的div。此div的宽度与包含列表框的宽度相同。

使用float或position:absolute我可以在一行上正确对齐这些元素。但是，当用户单击交换按钮时，div应交换位置。我宁愿不从DOM中删除div并在彼此的位置再添加它们。这是因为元素实际上是Javascript对象（更具体的是Google Closure Library组件），它们保存变量并附加事件处理程序。是否可以使用CSS交换div，而不为div分配静态宽度？

简化示例：

<div style="position:relative; height:60px;">
  <div style="float:left;">Our Team</div>
  <div style="float:left;"><button onclick="swap();">swap home/away</button></div>
  <div style="float:left;"><select><option>Opponent A</option><option>Opponent B</option></select></div>
</div>
<div style="clear:both;"></div>

当用户点击按钮时，第一个（我们的团队）和第三个（对手）div应该在浏览器中以可视方式交换，最好不要从DOM中删除元素。

Answer 1

我不希望从DOM中删除div并在彼此的位置再次添加它们。这是因为元素实际上是Javascript对象（更具体的是Google Closure Library组件），它们包含变量并附加了事件处理程序。

最佳解决方案是移动 DOM中的元素。这样做将保留现有的事件处理程序，这意味着您的代码仍然可以工作：

http://jsfiddle.net/thirtydot/LGGW2/

function swap() {
    var target1 = document.querySelector('#swapMe > :first-child');
    var target2 = document.querySelector('#swapMe > :last-child');

    var parent = target1.parentNode;
    parent.insertBefore(target1, null);
    parent.insertBefore(target2, parent.firstChild);
}

我假设你已经有了要交换的元素的引用，所以你可以用适当的代码替换document.querySelector行。

写完这个答案之后，我搜索了一个更通用的“交换”功能并发现了这个看起来不错的东西：Swap 2 html elements and preserve event listeners on them

Answer 2

在HTML中，两个div都相同(style="float:left;")，没有class或id，因此您只能交换两个div的HTML，即

function swap(e)
{
    e  = e || window.event, target = e.target || e.srcElement;
    var nEl=getElem(target.parentNode, 'next');
    var pEl=getElem(target.parentNode, 'prev');
    var pElHtml=pEl.innerHTML, nElHtml=nEl.innerHTML;
    pEl.innerHTML=nElHtml;
    nEl.innerHTML=pElHtml;
}

function getElem(elem, which) {
    if(which==='next') which='nextSibling';
    else if((which==='prev')) which='previousSibling'; 
    do{
        elem = elem[which];
    }
    while (elem && elem.nodeType != 1);
    return elem;        
}

DEMO

Answer 3

我已经为你的问题找到了一些解决方案。一两个是你的风格。如果我是你，我将删除内联样式（除非通过javascript添加）并将相同的类添加到所有“浮动”元素。

对于更新的浏览器，这将完美地运作：

.floaters{
    display:inline-block;
}

但对于较旧的浏览器（即5.5,6,7,8），您需要申请：

.floaters{
    display:inline;
    float:left;
    height:60px;/*set a default height*/
}

现在用于swap();功能。我不确定你如何应用这个，但我会通过更改innerHTML();

来交换元素

function swap(){
    var ele1HTML = document.getElementById('ele1').innerHTML();
    var ele3HTML = document.getElementById('ele3').innerHTML();
    document.getElementById('ele1').innerHTML(ele3HTML);
    document.getElementById('ele3').innerHTML(ele1HTML);
}

但是上面的代码将要求您向div添加ID属性。这是一个例子：

<div id="menu">
  <div id="ele1" class="floater">
      Our Team
  </div>
  <div id="ele2" class="floater">
      <button onclick="swap();">swap home/away</button>
  </div>
  <div id="ele3" class="floater">
      <select>
          <option>Opponent A</option>
          <option>Opponent B</option>
      </select>
  </div>
</div>
<div id="anotherDiv"></div>

但别忘了重新申请你的风格：

#menu{
    position:relative;
    height:60px; /*not needed for the older browser as I've set the child elements to 60px;*/
}
#anotherDiv{
    clear:both;
}

交换两个水平对齐的div

3 个答案: