我有多个 connectedSortable
部分,每个 div 内部都有一个 div.widget
,如下所示:
<div class="row">
<section class="col-xs-4 col-sm-4 col-md-4 col-lg-4 connectedSortable">
<div class="widget">Widget 1</div>
</section>
<section class="col-xs-4 col-sm-4 col-md-4 col-lg-4 connectedSortable">
<div class="widget">Widget 2</div>
</section>
<section class="col-xs-4 col-sm-4 col-md-4 col-lg-4 connectedSortable">
<div class="widget">Widget 3</div>
</section>
</div>
<div class="row">
<section class="col-xs-3 col-sm-3 col-md-3 col-lg-3 connectedSortable">
<div class="widget">Widget 4</div>
</section>
<section class="col-xs-3 col-sm-3 col-md-3 col-lg-3 connectedSortable">
<div class="widget">Widget 5</div>
</section>
<section class="col-xs-3 col-sm-3 col-md-3 col-lg-3 connectedSortable">
<div class="widget">Widget 6</div>
</section>
<section class="col-xs-3 col-sm-3 col-md-3 col-lg-3 connectedSortable">
<div class="widget">Widget 7</div>
</section>
</div>
使用可排序的 jQuery 插件,它会将拖动的 div 插入到 connectedSortable
部分而不是交换。
我想要做的不是将该 div 插入到 connectedSortable
部分中,而是将其与 connectedSortable
部分中的 div 交换。
当 connectedSortable
部分内部没有 div.widget
时,我只能删除一个 div.widget
而无需添加任何内容交换,因为它已经是空的。
我怎样才能做到这一点?
这是我尝试过的jsfiddle: http://jsfiddle.net/pus4aff6/
最佳答案
我不会使用此小部件的引导行,而是基于 jQuery UI Sortable description 创建我自己的网格与CSS弹性盒。
$( function() {
$( "ul" ).sortable().disableSelection();
} );
ul{
list-style-type: none; /* remove bullets */
display: flex; /* flexbox */
flex-wrap: wrap; /* multiple lines */
align-items: stretch;
}
li{
flex-grow: 1; /* stretch box width */
width: 20vw; /* 20vw is 20% of the browser width, you can replace it with an absolute value */
min-height:50px;
cursor:move;
}
/* remove margin & padding for this demo */
body, ul{
margin: 0;
padding: 0;
}
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<ul>
<li class="ui-state-default">Widget 1</li>
<li class="ui-state-default">Widget 2</li>
<li class="ui-state-default">Widget 3</li>
<li class="ui-state-default">Widget 4</li>
<li class="ui-state-default">Widget 5</li>
<li class="ui-state-default">Widget 6</li>
<li class="ui-state-default">Widget 7</li>
<li class="ui-state-default">Widget 8</li>
<li class="ui-state-default">Widget 9</li>
<li class="ui-state-default">Widget 10</li>
<li class="ui-state-default">Widget 11</li>
</ul>
删除类 ui-state-default
以使用您自己的设计而不是 jQuery UI。
关于javascript - 使用 jQuery sortable 交换两个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42276239/