Question

我试图通过jQuery实现带有可变项目的桌面。我有三个带孩子的<div>，我可以在他们之间交换孩子。我希望能够在他们之间交换父母。

例如，我想改变这个：

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

到此：

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

代码示例：

＆＃13;

$(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"});
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

我该怎么做？

Answer 1

向选项卡提供以下CSS规则应该可以解决问题（请参阅https://jsfiddle.net/179on6xk/）：

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

使用jQuery交换列

1 个答案: