javascript - Jquery 拖放像 windows 任务栏

Question

我是中级 jquery 经验，所以我需要一个很棒的界面演示的帮助:

Demo

但我不知道为什么它不拖到具有相同 ID 的“#drophere”的其他 div。请让它像 Windows 任务栏一样工作。谢谢

$( function() {
    $( "#dragme" ).draggable({
      appendTo: 'body',
      containment: '#drophere'
    });
  } );

body {
  position: fixed;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#dragme {
  position: absolute;
  background: rgba(0, 100, 200, 0.6);
  width: 100%;
  height: 50px;
  left: 0;
  bottom: 0;
  text-align: center;
  font-size: 36px;
  z-index: 999;
}
#drophere {
  position: absolute;
  background: rgba(200, 100, 0, 0.1);
  text-align: center;
}
.top {top:0;width: 100%;height: 50px;}
.left {left:0;width: 50px;height: 100%;}
.bottom {bottom:0;width: 100%;height: 50px;}
.right {right:0;width: 50px;height: 100%;}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dragme">Drag me</div>
<div id="drophere" class="top">Drop it Here</div>
<div id="drophere" class="left" style="padding-top:200px;">Drop it Here & stand it like me</div>
<div id="drophere" class="bottom">Drop it Here</div>
<div id="drophere" class="right" style="padding-top:200px;">Drop it Here & stand it like me</div>

Answer 1

正如 Michael 提到的，id 必须是唯一的，您需要使用类来代替。

此外，恕我直言，我会使用 .sortable()对于这种“对齐并填充”类型的行为，不是 draggable()。您可以使用 draggable() 进行一些配置，但 sortable 将以最小的努力工作。

这是一个工作示例和一个 jsfiddle

 $(function() {
   $(".drophere").sortable({
     connectWith: ".drophere"
   }).disableSelection();
 });

body {
  position: fixed;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#dragme {
  list-style-type: none;
  position: absolute;
  background: rgba(0, 100, 200, 0.6);
  width: 100%;
  height: 50px;
  left: 0;
  bottom: 0;
  text-align: center;
  font-size: 36px;
  z-index: 999;
}

.left #dragme, .right #dragme{
  height: 100%;
}
.drophere {
  position: absolute;
  background: rgba(200, 100, 0, 0.1);
  text-align: center;
  margin:0;
}

.top {
  top: 0;
  width: 100%;
  height: 50px;
}

.left {
  left: 0;
  width: 50px;
  height: 100%;
}

.bottom {
  bottom: 0;
  width: 100%;
  height: 50px;
}

.right {
  right: 0;
  width: 50px;
  height: 100%;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<ul class="top drophere">
  <li id="dragme">Drag me</li>
</ul>
<ul class="left drophere" style="padding-top:200px;"></ul>
<ul class="bottom drophere"></ul>
<ul class="right drophere" style="padding-top:200px;"></ul>