Question

我有多个div.widget部分，每个div内部有一个<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>，如下所示：

connectedSortable

使用可排序的jQuery插件，它会将拖动的div插入connectedSortable部分而不是交换。

我想要做的不是在connectedSortable部分中插入该div，而是要将其与connectedSortable部分内的div交换。

当div.widget部分内部没有div.widget时，我只能删除一个let images = [ UIImage(named: "image1"), UIImage(named: "image2"), UIImage(named: "image3") ] var currentIndex = 0 { didSet { if oldValue != currentIndex { currentIndexUpdated() } } } @IBAction func valueChanged(_ sender: UISlider) { currentIndex = Int(round(sender.value)) } func currentIndexUpdated() { guard 0..<images.count ~= currentIndex else { return } imageView.image = images[currentIndex] }并且没有任何内容可以交换，因为它已经是空的。

我该怎么做？

这是我尝试过的一个方面： http://jsfiddle.net/pus4aff6/

Answer 1

我不会使用这个小部件的引导行，而是使用css flexbox创建我自己的基于jQuery UI Sortable description的网格。

$( 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。

Answer 2

我创建了一个解决方案，其中我处理了start和receive事件，如下所示：

start: function(event, ui){
                        ui.item.startPos = ui.item.index();
                    },
                    receive: function(event, ui) {
                        var source = ui.sender;
                        var target = $(this);
                        var draggedItem = ui.item;
                        if(target.attr('id') !== 'widgets-container'){
                            if(target.find('div.widget').length >= 2){
                                if(source.is('#widgets-container')){
                                    draggedItem.remove();
                                    if(ui.item.startPos === 0) {
                                        source.prepend(draggedItem);
                                    }else{
                                        source.children().eq(ui.item.startPos-1).after(draggedItem);
                                    }
                                }else{
                                    var elementToSwap = target.find('div.widget').not(draggedItem)[0];
                                    source.html(elementToSwap);
                                }
                            }
                        }   
                    }

此处更新jsfiddle：http://jsfiddle.net/frgj5qmm/

使用jQuery sortable交换两个div

2 个答案: