Как переместить элемент div с помощью jQuery?

Question

var selectd = 0; 
 
    var itemLv1 = $("#create-summary .lv1"); 
 
    $(itemLv1).click(function(){ 
 
    selected = $(this).index(".lv1"); 
 
    $(this).toggleClass('clicked').siblings().removeClass('clicked'); 
 
    }); 
 

 
    $("#moveUp").click(function(){ 
 
    if(selected > 0){ 
 
     jQuery($(itemLv1).eq(selected - 1).before(jQuery($(itemLv1).eq(selected)))); 
 
     selected = selected - 1; 
 
     console.log(selected); 
 
    } 
 
    });

.clicked { 
 
    background-color:red; 
 
} 
 

 
.lv2 { 
 
    margin-left:10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="create-summary"> 
 
      <div class="lv1">1. AAA</div> 
 
      <div class="lv1">2. BBB</div> 
 
      <div class="lv1">3. CCC</div> 
 
      <div class="lv2">3.1 111</div> 
 
      <div class="lv2">3.2 222</div> 
 
      <div class="lv2">3.3 333</div> 
 
      <div class="lv1">4. DDD</div> 
 
      <div class="lv1">5. EEE</div> 
 
      </div> 
 

 
<button type="button" id="moveUp">Up </button>

Теперь я пишу некоторые JQuery пошевелить Div вверх и он работает, но двигаться только один раз. При повторном нажатии div не будет двигаться правильно.

В чем проблема?

Также, как перемещать класс «lv1» с классом «lv2» одновременно?

Answer 1

Одно решение для хранения элемента вместо индекса:

// Store Element here instead of Index 
var $selectd = $(); 
var $itemLv1 = $("#create-summary .lv1"); 
$itemLv1.click(function(){ 
    $selectd = $(this); //Note: Storing element instead of index 
    $(this).toggleClass('clicked').siblings().removeClass('clicked'); 
}); 

$("#moveUp").click(function(){ 
    // Take the current selected element (if none, jQuery doesn't do anything) 
    $selectd.add($selectd.nextUntil(":not(.lv2)"))  // Add any following `.lv2` elements to the collection 
      .insertBefore($selectd.prevAll(".lv1:first")) // Insert before the previous `.lv1` 
}); 

См скрипку: http://jsfiddle.net/knexpvqn/

Answer 2

Это код, который я использовал, чтобы переместить элемент вверх:

$("#moveUp").click(function() { 
    $(".clicked").insertBefore($("#create-summary").children().get($(".clicked").index() - 1)); 
}); 

Here is the JSFiddle demo

Answer 3

Попробуйте ручку: http://codepen.io/nOji/pen/RPvexe

Вопрос, который я заметил с вашим кодом является то, что itemLv1 переменной воны Это будет представление ваших элементов после манипуляции с DOM, поэтому событие щелчка на вставленных элементах не будет работать, и действие перемещения не будет запрашивать правильные индексы.

Answer 4

Вы можете сделать это следующим образом:

$("#create-summary .lv1").click(function() { 
 
    $(this).toggleClass('clicked').siblings().removeClass('clicked'); 
 
}); 
 

 
$("#moveUp").click(function() { 
 
    var selected = $("#create-summary").find(".clicked"); 
 
    selected.prev().before(selected); 
 
});

.clicked { 
 
    background-color:red; 
 
} 
 
.lv2 { 
 
    margin-left:10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="create-summary"> 
 
    <div class="lv1">1. AAA</div> 
 
    <div class="lv1">2. BBB</div> 
 
    <div class="lv1">3. CCC</div> 
 
    <div class="lv2">3.1 111</div> 
 
    <div class="lv2">3.2 222</div> 
 
    <div class="lv2">3.3 333</div> 
 
    <div class="lv1">4. DDD</div> 
 
    <div class="lv1">5. EEE</div> 
 
</div> 
 
<button type="button" id="moveUp">Up</button>