Jquery UI可拖动和可交换

Question

这是我第一次使用jquery ui和布局插件。我已经制作了几个需要可以交换的div。我链接了一个当前布局的jsfiddle，以便您可以看到我正在尝试做什么。我已经尝试了几种解决方案，但它们太过马车或移动“引脚”div是非常滞后的。您是否有任何可能的解决方案使这些“pin”div轻松拖动和交换？下面是一个应该拖动和交换的项目示例。

 <div class="pinChildContainer">
      <div class="pins">
           <img class="pinImage" src="img/paymentServices.jpg" alt="Payment Services" width="188" height="185" />
           <p class="pinTitle">Payment Services</p>
      </div>
 </div>

https://jsfiddle.net/qqx25vg8/3/

Answer 1

Tyharo，在我做出解决方案之前，我对你的html / css做了一个严肃的编辑，所以这是一个精简版本。你在div中有很多不必要的类/ div！整理很好！ ：）

现在，因为你的身高有限而且没有分成子类别（你可以自己做这个） - 这个例子只是交换你从开始到结尾拖动的那个。但它们是可拖动和可交换的！

我不确定为什么你把它划分为'行' - 看起来是3，当它最初出现在我的小提琴上时，然后是3当我加宽它时，1当我缩小它时。如果你想要的东西只包含一定数量的项目，那么给它一个固定的宽度，虽然这是不可取的，或至少应该用媒体查询进行调整。想想回应！

无论如何，运行片段！我累了.......... 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，添加了'sortable'（你必须为子引脚添加一个浮点数），并创建更多的引脚类，以便将子项限制在自己的子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>