CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dreams
Dreams

Reputation: 8506

How to move div element inside another div element?

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

  $("#moveUp").click(function(){
      $selected.add($selected.nextUntil(":not(.lv2)"))        
              .insertBefore($selected.prevAll(".lv1:first"));
  });

  $("#moveDown").click(function(){
    $selected.add($selected.nextUntil(":not(.lv2"))
             .insertAfter($selected.nextAll(".lv1:first"));
  });
.clicked{
  color: red;
  font-weight:700;
}

.lv2, .lv3 {
  margin-left:15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="create-summary">
            <div class="lv1"> Introduction</div>
            <div class="lv1">1. AAA</div>
            <div class="lv1">2. BBB</div>
            <div class="lv1">3. CCC
              <div class="lv2">3.1 aaa</div>
              <div class="lv2">3.2 bbb</div>
              <div class="lv2">3.3 ccc</div>
              <div class="lv2">3.4 ddd
                <div class="lv3">3.4.1 xxxxx</div>
                <div class="lv3">3.4.2 yyyyy</div>
                <div class="lv3">3.4.3 zzzzz</div>
              </div>
            </div>
            <div class="lv1">4. DDD</div>
            <div class="lv1">5. EEE</div>
        </div>

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

Now, I can move up or down for lv1 element with its child element.

However, how to only move an div element inside the child div?(only in lv3 or lv4 even lv5 or lv6)

Fir example, I want to move "ccc" up only in lv2 or move xxxxx only in lv3. Is there any way can do that?

Upvotes: 1

Views: 86

Answers (1)

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67187

I assume that you want a functionality like this,

var $selected = $();
var $itemLv1 = $("#create-summary [class^=lv]");

$itemLv1.click(function (e) {
    $selected = $(this);
    var x = $(this).toggleClass('clicked');
    $("[class^=lv]").not(x).removeClass("clicked child").addClass("child");
    x.siblings().removeClass('clicked');
    e.stopPropagation();
});

$("#moveUp").click(function () {
    $selected.insertBefore($selected.prev("[class^=lv]"));
});

$("#moveDown").click(function () {
    $selected.insertAfter($selected.next("[class^=lv]"));
});

DEMO

Upvotes: 1

Related Questions