使用 jQuery 拖放交换答案

【问题标题】：Drag and drop swap using jQuery使用 jQuery 拖放交换
【发布时间】：2016-06-03 03:33:49
【问题描述】：

我想知道如何使用 jQuery 进行拖放交换。我有 3 个父 div，我有 2 个子 div。我希望子 div 可以在没有子 div 的父 div 中放置，但我不希望任何父 div 能够存储 2 个子 div。如果一个子 div 被拖到一个带有子 div 的父 div 中，我希望两个子 div 交换。我很喜欢使用 jQuery UI，因为下面的代码包含它。

$("document").ready(function() {
  $(".child").draggable({
    revert: true
  });
  $(".parent").droppable({
    accept: '.child',
    drop: function(event, ui) {
      $(this).append($(ui.draggable));
    }
  });
});*

.parent {
   float: left;
   margin-left: 5px;
   height: 200px;
   width: 200px;
   border: 3px solid black
 }
 #child1 {
   height: 50px;
   width: 50px;
   background-color: khaki;
 }
 #child2 {
   height: 50px;
   width: 50px;
   background-color: aqua;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"</script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>      
    <div class="parent">
  <div class="child" id="child1"></div>
</div>
<div class="parent">
  <div class="child" id="child2"></div>
</div>
<div class="parent">
</div>

任何帮助，尤其是代码形式的帮助，将不胜感激。

jsfiddle：https://jsfiddle.net/g2efds1z/10/

【问题讨论】：

标签： jquery html css jquery-ui drag-and-drop

【解决方案1】：

嗯，你必须将已经在其中的元素移动到另一个，所以我将首先在你的 drop 函数中包含这样的代码：

if ($(this).children().length > 0) {
  var move = $(this).children().detach();
  $(ui.draggable).parent().append(move);
}

这添加到整个代码中：

$("document").ready(function() {
  $(".child").draggable({
    revert: true
  });
  $(".parent").droppable({
    accept: '.child',
    drop: function(event, ui) {
    if ($(this).children().length > 0) {
      var move = $(this).children().detach();
      $(ui.draggable).parent().append(move);
    }

      $(this).append($(ui.draggable));
    }
  });
});

.parent {
   float: left;
   margin-left: 5px;
   height: 200px;
   width: 200px;
   border: 3px solid black
 }
 #child1 {
   height: 50px;
   width: 50px;
   background-color: khaki;
 }
 #child2 {
   height: 50px;
   width: 50px;
   background-color: aqua;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>      
<div class="parent">
  <div class="child" id="child1"></div>
</div>
<div class="parent">
  <div class="child" id="child2"></div>
</div>
<div class="parent">
</div>

【讨论】：