CODEWITHSUNDEEP
javascriptjquery
Redair
Redair

Reputation: 204

swap columns with jQuery

I'm trying to realize desk with mutable items with jQuery. I have three <div>s with children and I can swap children between them. I want to be able to swap parents between them too.

For example, I want to change this:

- 1  4  7
- 2  5  8
- 3  6  9

to this:

- 1  7  4
- 2  8  5
- 3  9  6

Code example:

$(document).ready(function() {
   $("#sort1").sortable({connectWith:"#sort2, #sort3 "});
   $("#sort2").sortable({connectWith:"#sort3, #sort1"});
   $("#sort3").sortable({connectWith:"#sort2, #sort1"});
   $("#tab1").sortable({connectWith:"#tab2, #tab3"});
   $("#tab2").sortable({connectWith:"#tab1, #tab3"});
   $("#tab3").sortable({connectWith:"#tab2, #tab1"});
});
.ui-sortable div div
{
border:1px solid;
margin:6px;
font-size:1.3em;
padding:5px;
width:160px;
background-color:#F0E3F3;
padding-left:20px;
}


#sort1, #sort2, #sort3
{
float:left;
padding: 10px;
border: 1px solid black;
margin: 10px;
border-radius:10px;
}

#sort2 div
{
background-color:#FBFED6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet"/>
<script
  src="https://code.jquery.com/ui/1.8.24/jquery-ui.min.js"
  integrity="sha256-UOoxwEUqhp5BSFFwqzyo2Qp4JLmYYPTHB8l+1yhZij8="
  crossorigin="anonymous"></script>


<div id ="tab1">
      <div id="sort1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
      </div>
    </div>
  <div id ="tab2">
    <div id="sort2">
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </div>
  <div id ="tab3">
    <div id="sort3">
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
    </div>
  </div>

How can I do this?

Upvotes: 1

Views: 126

Answers (1)

Joe Coyle
Joe Coyle

Reputation: 621

Providing the following CSS rule to your tabs should do the trick (see https://jsfiddle.net/179on6xk/):

#tab1, #tab2, #tab3
{
float:left;
}

Upvotes: 2

Related Questions