Jquery UI 可拖动和可交换答案

【解决方案1】：

Tyharo，在我做解决方案之前，我对你的 html/css 进行了认真的编辑，所以这是一个精简的版本。您在 div 中有很多不必要的类/ div！去污就好了！ :)

现在，因为您的高度有限，并且它们没有被划分为子类别（您可以自己做那一点） - 这个例子只是交换你从头到尾拖动的那个。但它们是可拖动和可交换的！

我不知道你为什么把它分成“行”——看起来是 3，当它最初出现在我的小提琴上时，它是 2，然后当我加宽它时是 3，当我缩小它时是 1。如果您希望某些内容只包含一定数量的项目，那么给它一个固定的宽度，尽管这不是可取的，或者至少应该通过媒体查询进行调整。考虑响应！

无论如何，运行 sn-p！我累了…………zzzzzzzzzzzz。

雷切尔

$(".draggable").draggable();
var draggableArguments = {
  revert: 'invalid',
  helper: 'clone',
  appendTo: '#pins-container',
  refreshPositions: true,
  containment: 'DOM',
  zIndex: 1500,
  addClasses: false
};

$('.pins').draggable(draggableArguments);
$('.pins').droppable();

$('#pins-container').droppable({
  tolerance: "intersect",
  accept: ".pins",
  activeClass: "ui-state-default",
  hoverClass: "ui-state-hover",
  drop: function(event, ui) {
    $('#pins-container').append($(ui.draggable));
  }
});

#main-content {
  margin: auto;
  width: auto;
  /*background-color: orange;*/
  height: 700px;
  max-height: 700px;
}
#pins-container {
  margin: auto;
  width: 100%;
  height: auto;
  float: left;
  padding-bottom: 25px;
  margin-left: 2%;
  margin-right: 2%;
}
.pins {
  min-width: 270px;
  min-height: 280px;
  display: inline-block;
  align-items: center;
  text-align: center;
  margin: 1px;
  border: solid black 1px;
  border-radius: 5px;
  margin-top: 50px;
  background-color: #FFF;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.pins:hover {
  transform: scale(1.03);
  -webkit-box-shadow: 0 8px 6px -6px black;
  -moz-box-shadow: 0 8px 6px -6px black;
  box-shadow: 0 8px 6px -6px black;
}
.pinTitle {
  font-size: 20px;
}
.draggable {
  border: solid 1px gray;
}
.pinImage {
  width: 188px;
  height: 155px;
  margin-top: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" src="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" type="text/css">
<div id="mainContent">
  <div class="ui-layout-center">
    <div id="pins-container">
      <div class="pins" class="draggable">
        <img class="pinImage" src="img/paymentServices.jpg" alt="test1" />
        <p class="pinTitle">test1</p>
      </div>

      <div class="pins" class="draggable">
        <img class="pinImage" src="img/financialTargeting.jpg" alt="test2" />
        <p class="pinTitle">test2</p>
      </div>

      <div class="pins" class="draggable">
        <img class="pinImage" src="img/processRatios.jpg" alt="test3" />
        <p class="pinTitle">test3</p>
      </div>

      <div class="pins" class="draggable">
        <img class="pinImage" src="img/suitcaseOrdering.jpg" alt="test4" />
        <p class="pinTitle">test4</p>
      </div>

      <div class="pins" class="draggable">
        <img class="pinImage" src="img/reassignPriorities.jpg" alt="test5" />
        <p class="pinTitle">test5</p>
      </div>

      <div class="pins" class="draggable">
        <img class="pinImage" src="img/evaluateSecurity.jpg" alt="test6" />
        <p class="pinTitle">test</p>
      </div>
      <!-- End of Pins Container -->
    </div>
  </div>
</div>

编辑：我创建了子 div，添加了“可排序”（您必须为子引脚添加一个浮点数），并创建了更多引脚类，以便将孩子限制在他们自己的子 div 中

在这里查看https://fiddle.jshell.net/RachGal/kueztcvr/show/

$(".draggable").draggable();

var draggableArguments = {
  revert: 'invalid',
  helper: 'clone',
  appendTo: '#child1',
  appendTo: '#child2',
  appendTo: '#child3',
  refreshPositions: true,
  containment: 'DOM',
  zIndex: 1500,
  addClasses: false
};

$('#child1').droppable({
  tolerance: "intersect",
  accept: ".pins1",
  activeClass: "ui-state-default",
  hoverClass: "ui-state-hover",
  drop: function(event, ui) {
    $('#child1').append($(ui.draggable));
  }
});

$('#child2').droppable({
  tolerance: "intersect",
  accept: ".pins2",
  activeClass: "ui-state-default",
  hoverClass: "ui-state-hover",
  drop: function(event, ui) {
    $('#child2').append($(ui.draggable));
  }
});


$('#child3').droppable({
  tolerance: "intersect",
  accept: ".pins3",
  activeClass: "ui-state-default",
  hoverClass: "ui-state-hover",
  drop: function(event, ui) {
    $('#child3').append($(ui.draggable));
  }
});

$("#child1").sortable();
$("#child2").sortable();
$("#child3").sortable();

#main-content {
  margin:auto;
  width: 100%;
  height: auto;  /*i changed this from 700 cos it resizes to the size of the pins container anyway*/
}

#pins-container {
  margin-left:17%;
  margin-right:17%;
  width: 100%;
  float:left;
  height: auto;
  padding-bottom: 25px;
}

#child1,
#child2,
#child3 {
  max-width: 63%!important;   /*I was gonna put in max-width:850px here but better to have percentages*/
}

.pins1,
.pins2,
.pins3 {
  width: 272px; /*I left these but really they should be % too. Add media queries!*/
  height: 282px;
  float: left;
  text-align: center;
  margin: 1px;
  border: solid black 1px;
  border-radius: 5px;
  margin-top: 50px;
  background-color: #FFF;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.pins1:hover, .pins2:hover , .pins3:hover  {
  transform: scale(1.03);
  -webkit-box-shadow: 0 8px 6px -6px black;
  -moz-box-shadow: 0 8px 6px -6px black;
  box-shadow: 0 8px 6px -6px black;
}

.pinTitle {
  font-size: 20px;
}

.draggable {
  border: solid 1px gray;
}

.pinImage {
  width: 188px;  /*another case for media queries!*/
  height: 155px;
  margin-top: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" src="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<div id="mainContent">
  <div id="pins-container">

    <div id="child1">
      <div class="pins1" class="draggable">
        <img class="pinImage" src="img/paymentServices.jpg" alt="test1" />
        <p class="pinTitle">test1</p>
      </div>

      <div class="pins1" class="draggable">
        <img class="pinImage" src="FinancialTargeting.jpg" alt="test2" />
        <p class="pinTitle">test2</p>
      </div>
      <div class="pins1" class="draggable">
        <img class="pinImage" src="FinancialTargeting.jpg" alt="test3" />
        <p class="pinTitle">test3</p>
      </div>
    </div>

    <div id="child2">
      <div class="pins2" class="draggable">
        <img class="pinImage" src="img/processRatios.jpg" alt="test3" />
        <p class="pinTitle">test4</p>
      </div>
      <div class="pins2" class="draggable">
        <img class="pinImage" src="img/suitcaseOrdering.jpg" alt="test4" />
        <p class="pinTitle">test5</p>
      </div>
      <div class="pins2" class="draggable">
        <img class="pinImage" src="img/suitcaseOrdering.jpg" alt="test4" />
        <p class="pinTitle">test6</p>
      </div>
    </div>

    <div id="child3">
      <div class="pins3" class="draggable">
        <img class="pinImage" src="img/reassignPriorities.jpg" alt="test5" />
        <p class="pinTitle">test7</p>
      </div>
      <div class="pins3" class="draggable">
        <img class="pinImage" src="img/evaluateSecurity.jpg" alt="test6" />
        <p class="pinTitle">test8</p>
      </div>
      <div class="pins3" class="draggable">
        <img class="pinImage" src="img/evaluateSecurity.jpg" alt="test6" />
        <p class="pinTitle">test9</p>
      </div>
    </div>

  </div>
</div>

【讨论】：

感谢您的清理和帮助！交换接近我正在寻找的东西，但我希望将拖动的项目交换位置与它放下的项目。这会是困难的还是相对简单的解决方案？
嘿，我刚刚又醒了（据我所知，睡了 2 个小时后！）你没有弹奏我留下的评论吗？那应该工作！我的意思是你想要的方式......无论如何......早餐！然后编码！
被注释的 jsfiddle 做的事情，将拖拽的项目发送到最后。但是，我确实找到了拖动时导致滞后的原因！ pin 类的过渡效果是罪魁祸首。
再次感谢瑞秋，非常感谢！