如何相互交换所有div

Question

这就是我的画廊的样子：

我需要 javascript/jquery 函数：“arrow_left()”和“arrow_right”，用于更改带有图像的 div 的位置（所有 div 都在中间）。例如，当我单击“图像 2”上的右箭头时，“图像 2”应该与“图像 3”交换它们的位置。 下面我介绍如何将“image 2”与“image 3”交换，将“image 2”留空（“image 3”将被删除）。

<script>
    function arrow_right(id_number) {
        var present_div = $('#' + id_number);
        id_number = id_number + 1;
        var next_div = $('#' + id_number);

        $(present_div).replaceWith(next_div); 
        //$(next_div).replaceWith(present_div); <- doesn't work
    }

    function arrow_left(id_number) {
        var present_div = $('#' + id_number);
        id_number = id_number - 1;
        var prev_div = $('#' + id_number);

        $(present_div).replaceWith(prev_div); 
        //$(prev_div).replaceWith(present_div); <- doesn't work
    }
</script>

    <div id='ID_1' class='col-lg-4 col-md-6 portfolio-item'>
    <div class='thumbnail'>
        <div onclick='arrow_left(1);'><span class='glyphicon glyphicon-arrow-left' style='color: yellow; left: 78px; top: 5px;'></span></div>
        <div onclick='arrow_right(1);'><span class='glyphicon glyphicon-arrow-right' style='color: yellow; left: 136px; top: 5px;'></span></div>
        <img id='1' class='img-responsive' src='path/to/img'> 
    </div>
</div>
<div id='ID_2' class='col-lg-4 col-md-6 portfolio-item'>
    <div class='thumbnail'>
        <div onclick='arrow_left(2);'><span class='glyphicon glyphicon-arrow-left' style='color: yellow; left: 78px; top: 5px;'></span></div>
        <div onclick='arrow_right(2);'><span class='glyphicon glyphicon-arrow-right' style='color: yellow; left: 136px; top: 5px;'></span></div>
        <img id='2' class='img-responsive' src='path/to/img'> 
    </div>
</div>

<div class='clearfix visible-md-block'></div>

<div id='ID_3' class='col-lg-4 col-md-6 portfolio-item'>
    <div class='thumbnail'>
        <div onclick='arrow_left(3);'><span class='glyphicon glyphicon-arrow-left' style='color: yellow; left: 78px; top: 5px;'></span></div>
        <div onclick='arrow_right(3);'><span class='glyphicon glyphicon-arrow-right' style='color: yellow; left: 136px; top: 5px;'></span></div>
        <img id='3' class='img-responsive' src='path/to/img'> 
    </div>
</div>
<div class='clearfix visible-lg-block'></div>
<div id='ID_4' class='col-lg-4 col-md-6 portfolio-item'>
    <div class='thumbnail'>
        <div onclick='arrow_left(4);'><span class='glyphicon glyphicon-arrow-left' style='color: yellow; left: 78px; top: 5px;'></span></div>
        <div onclick='arrow_right(4);'><span class='glyphicon glyphicon-arrow-right' style='color: yellow; left: 136px; top: 5px;'></span></div>
        <img id='4' class='img-responsive' src='path/to/img'> 
    </div>
</div>

<div class='clearfix visible-md-block'></div>

<div id='ID_5' class='col-lg-4 col-md-6 portfolio-item'>
    <div class='thumbnail'>
        <div onclick='arrow_left(5);'><span class='glyphicon glyphicon-arrow-left' style='color: yellow; left: 78px; top: 5px;'></span></div>
        <div onclick='arrow_right(5);'><span class='glyphicon glyphicon-arrow-right' style='color: yellow; left: 136px; top: 5px;'></span></div>
        <img id='5' class='img-responsive' src='path/to/img'> 
    </div>
</div>
<div id='ID_6' class='col-lg-4 col-md-6 portfolio-item'>
    <div class='thumbnail'>
        <div onclick='arrow_left(6);'><span class='glyphicon glyphicon-arrow-left' style='color: yellow; left: 78px; top: 5px;'></span></div>
        <div onclick='arrow_right(6);'><span class='glyphicon glyphicon-arrow-right' style='color: yellow; left: 136px; top: 5px;'></span></div>
        <img id='6' class='img-responsive' src='path/to/img'> 
    </div>
</div>
<div class='clearfix visible-lg-block'></div>

<div class='clearfix visible-md-block'></div>

<div id='ID_7' class='col-lg-4 col-md-6 portfolio-item'>
    <div class='thumbnail'>
        <div onclick='arrow_left(7);'><span class='glyphicon glyphicon-arrow-left' style='color: yellow; left: 78px; top: 5px;'></span></div>
        <div onclick='arrow_right(7);'><span class='glyphicon glyphicon-arrow-right' style='color: yellow; left: 136px; top: 5px;'></span></div>
        <img id='7' class='img-responsive' src='path/to/img'> 
    </div>
</div>

我不知道这有多好。如果有人可以帮助我吗？也许有人知道其他解决方案，但没有拖放 - 我测试了可排序的 jQuery UI，但效果不太好。

我不需要滑块。我需要在页面中显示所有图像并更改它们的顺序（在管理员面板中）。数据库中的每个图像都有字段“顺序”，它影响页面上图像的显示顺序。我正在寻找可以很好地更改此订单的解决方案。

Answer 1

你可以像这样替换outerHTML元素：

 function arrow_change(el, fw) {
    var id = el.parentElement.parentElement.id;
    var id_number = eval(id.substr(3))
    var present_div = $('#ID_' + id_number + " div").get(0);//get(0) returns first DOM Element
    id_number = id_number + fw //fw is either 1 or -1;
    var next_div = $('#ID_' + id_number + " div").get(0);
    var present_html = present_div.outerHTML;
    var next_html = next_div.outerHTML;
    present_div.outerHTML = next_html;
    next_div.outerHTML = present_html;   
}

用this 指定参数el 和fw 用1 或-1 取决于右或左

EX：onclick="arrow_change(this, 1)" 用于右移。

演示： https://codecanister.com/Project/d547eed9/1/fullscreen/b

Answer 2

第二张图片没有更新的原因是你使用了replaceWith。例如，您可以使用html() 更改它 您还可以通过添加第二个参数来计算 id 来改进您的功能，因为 arrow_left 和 arrow_right 之间的唯一区别是加或减 1。

function swapImage(shouldAddOne) {
  var id = $(event.target).parents('.portfolio-item').first().attr('id');
  id = id.split('_');
  id = id[id.length-1];
  id = parseInt(id, 10);
  var present_div = $('#ID_' + id)
  var present_div_html = present_div.html();
  id = shouldAddOne ? id + 1 : id - 1;
  var next_div = $('#ID_' + id);
  var next_div_html = next_div.html();

  $(present_div).html(next_div_html); 
  $(next_div).html(present_div_html);
}

你可以像这样在你的 html 中使用它：swapImage(true) 向右移动，swapImage(false) 向左移动

如果您更喜欢使用库，可以查看this slider

Answer 3

这是一种可能的解决方案，可以使用普通的 javascript 处理任意数量的图像：

// Count Number of Images
var figures = document.getElementsByTagName('figure');


// Add Buttons to each Image
for (var i = 0; i < figures.length; i++) {

    // Create Move Image Left Button
    var leftSpan = document.createElement('span');
    leftSpan.classList.add('left');
    var leftArrow = document.createTextNode('\u25c0');
    leftSpan.appendChild(leftArrow);

    // Create Move Image Right Button
    var rightSpan = document.createElement('span');
    rightSpan.classList.add('right');
    var rightArrow = document.createTextNode('\u25b6');
    rightSpan.appendChild(rightArrow);

    // Add Left and Right Buttons to each Image
    figures[i].appendChild(leftSpan);
    figures[i].appendChild(rightSpan);
}


// moveLeft Function

function moveLeft() {
    for (var i = 0; i < figures.length; i++) {
        if (figures[i] === this.parentNode) {
            var thisFigure = this.parentNode;
            var currentImage = thisFigure.getElementsByTagName('img')[0];
            var currentFigcaption = thisFigure.getElementsByTagName('figcaption')[0];

            var previousFigure = figures[(i-1)];
            var previousImage = previousFigure.getElementsByTagName('img')[0];
            var previousFigcaption = previousFigure.getElementsByTagName('figcaption')[0];

            thisFigure.insertBefore(previousFigcaption,currentFigcaption);
            previousFigure.insertBefore(currentFigcaption,previousImage);
            thisFigure.insertBefore(previousImage,currentImage);
            previousFigure.insertBefore(currentImage,currentFigcaption);
        }
    }
}


// moveRight Function

function moveRight() {
    for (var i = 0; i < figures.length; i++) {
        if (figures[i] === this.parentNode) {
            var thisFigure = this.parentNode;
            var currentImage = thisFigure.getElementsByTagName('img')[0];
            var currentFigcaption = thisFigure.getElementsByTagName('figcaption')[0];

            var nextFigure = figures[(i+1)];
            var nextImage = nextFigure.getElementsByTagName('img')[0];
            var nextFigcaption = nextFigure.getElementsByTagName('figcaption')[0];

            thisFigure.insertBefore(nextFigcaption,currentFigcaption);
            nextFigure.insertBefore(currentFigcaption,nextImage);
            thisFigure.insertBefore(nextImage,currentImage);
            nextFigure.insertBefore(currentImage,currentFigcaption);
        }
    }
}


// Initialise Buttons
for (var i = 0; i < figures.length; i++) {

    if (i > 0) {
        var leftButton = figures[i].getElementsByClassName('left')[0];
        leftButton.addEventListener('click',moveLeft,false);
    }

    if (i < (figures.length - 1)) {
        var rightButton = figures[i].getElementsByClassName('right')[0];
        rightButton.addEventListener('click',moveRight,false);
    }
}

figure {
display: block;
position: relative;
float: left;
margin: 12px;
width: 200px;
height: 124px;
border: 3px solid rgb(0,0,0);
}

figure img {
display: block;
width: 176px;
height: 76px;
margin: 12px 12px 6px;
border: 1px solid rgb(31,31,31);
}

figcaption {
text-align: center;
}

.left {
display: block;
position: absolute;
left: 0;
bottom: 0;
cursor: pointer;
}

.right {
display: block;
position: absolute;
right: 0;
bottom: 0;
cursor: pointer;
}

<figure>
<img src="/image1.png" title="Image 1" alt="Image 1" />
<figcaption>Image 1</figcaption>
</figure>

<figure>
<img src="/image2.png" title="Image 2" alt="Image 2" />
<figcaption>Image 2</figcaption>
</figure>

<figure>
<img src="/image3.png" title="Image 3" alt="Image 3" />
<figcaption>Image 3</figcaption>
</figure>

Answer 4

这是一个交换卡片/网格项目的示例。我使用了您发布的 html 的简化版本。我假设您正在使用您正在使用的样式中的 Bootstrap，并将其包含在演示中。如果您想要一个不基于 Bootstrap/jQuery 的版本，请告诉我，我很乐意更新。

由于我使用的图像占位符服务经常返回给定尺寸的相同图像，因此我在卡头中包含了一个静态数字，以便您查看交换。

我不鼓励通过更新属性或其他“文本”方法进行交换，因为如果您拥有它们，您将很难在卡片上维护事件处理程序（例如点击跟踪）。

这种方法也不需要维护当前、下一个和上一个的概念，因为新的点击处理程序可以很容易地为您解决这个问题。

我添加了一些额外的 CSS 来“隐藏”没有做任何事情的箭头。您可以执行相同的操作或删除这些样式元素。代码仍然可以与这些元素一起正常工作。

这里有一些您可能也感兴趣的类似问题：

• How to move an element into another element
• How to move child element from one parent to another

function swapChildren($parentA, $parentB) {
  if ($parentA.length === 0 || $parentB.length === 0){ return; }

  var $childrenA = $parentA.children();
  var $childrenB = $parentB.children();

  $parentA.append($childrenB);
  $parentB.append($childrenA);
}

$(".arrowLeft").on("click", function(){
  var $parent = $(this).closest(".portfolio-item");
  swapChildren($parent, $parent.prev());
});

$(".arrowRight").on("click", function(){
  var $parent = $(this).closest(".portfolio-item");
  swapChildren($parent, $parent.next());
});

.portfolio-item .thumbnail { text-align: center; }
.portfolio-item .thumbnail > div { display: inline-block; padding: 0.5em; }
.glyphicon { font-size: 2em; color: red; }

/*  hide arrows that don't do anything */
.row .portfolio-item:first-child .arrowLeft { display: none; }
.row .portfolio-item:last-child .arrowRight { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container">
  <div class="row">

    <div class='col-xs-4 portfolio-item'>
      <div class='thumbnail'>
        <div class="arrowLeft"><span class='glyphicon glyphicon-arrow-left'></span></div>
        <span style="font-size: 2em;"> 1 </span>
        <div class="arrowRight"><span class='glyphicon glyphicon-arrow-right'></span></div>
        <img id='1' class='img-responsive' src='http://lorempixel.com/200/100/'>
      </div>
    </div>

    <div class='col-xs-4 portfolio-item'>
      <div class='thumbnail'>
        <div class="arrowLeft"><span class='glyphicon glyphicon-arrow-left'></span></div>
        <span style="font-size: 2em;"> 2 </span>
        <div class="arrowRight"><span class='glyphicon glyphicon-arrow-right'></span></div>
        <img id='1' class='img-responsive' src='http://lorempixel.com/200/100/'>
      </div>
    </div>

    <div class='col-xs-4 portfolio-item'>
      <div class='thumbnail'>
        <div class="arrowLeft"><span class='glyphicon glyphicon-arrow-left'></span></div>
        <span style="font-size: 2em;"> 3 </span>
        <div class="arrowRight"><span class='glyphicon glyphicon-arrow-right'></span></div>
        <img id='1' class='img-responsive' src='http://lorempixel.com/200/100/'>
      </div>
    </div>

    <div class='col-xs-4 portfolio-item'>
      <div class='thumbnail'>
        <div class="arrowLeft"><span class='glyphicon glyphicon-arrow-left'></span></div>
        <span style="font-size: 2em;"> 4 </span>
        <div class="arrowRight"><span class='glyphicon glyphicon-arrow-right'></span></div>
        <img id='1' class='img-responsive' src='http://lorempixel.com/200/100/'>
      </div>
    </div>

    <div class='col-xs-4 portfolio-item'>
      <div class='thumbnail'>
        <div class="arrowLeft"><span class='glyphicon glyphicon-arrow-left'></span></div>
        <span style="font-size: 2em;"> 5 </span>
        <div class="arrowRight"><span class='glyphicon glyphicon-arrow-right'></span></div>
        <img id='1' class='img-responsive' src='http://lorempixel.com/200/100/'>
      </div>
    </div>

  </div>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>