Jquery Drag＆amp;像Windows任务栏一样掉落

Question

我是中级jquery体验，所以我需要一个很棒的界面Demo：

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()进行此操作＆＃34;对齐并填写＆＃34;类型行为，而不是draggable()。您可以 使用draggable()进行一些配置，但排序可以轻松完成。

以下是一个工作示例和jsfiddle

＆＃13;

＆＃13;

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

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;