我是中级 jquery 经验,所以我需要一个很棒的界面演示的帮助:
但我不知道为什么它不拖到具有相同 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>
最佳答案
正如 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>
关于javascript - Jquery 拖放像 windows 任务栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43713443/