Javascript jquerydrag&；下拉式windows任务栏

我有中级jquery经验，因此我需要一个很棒的界面演示帮助：

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

$（函数（）{
美元（“#dragme”）。可拖动({
附于：'正文'，
包含：“#放在这里”
});
} );
正文{
位置：固定；
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
#德拉格姆{
位置：绝对位置；
背景：rgba（0,100200,0.6）；
宽度：100%；
高度：50px；
左：0；
底部：0；
文本对齐：居中；
字体大小：36px；
z指数：999；
}
#滴落{
位置：绝对位置；
背景：rgba（200,100,0,0.1）；
文本对齐：居中；
}
.top{top:0；宽度：100%；高度：50px；}
.left{left:0；宽度：50px；高度：100%；}
.bottom{bottom:0；宽度：100%；高度：50px；}
.right{right:0；宽度：50px；高度：100%；}

拖我
把它扔在这里
把它扔在这里，像我一样站着
把它扔在这里
把它放在这里，像我一样站着
就像Michael提到的，id必须是唯一的，你会想用类来代替

另外，IMHO，我会使用这种“捕捉并填充”类型行为，而不是
draggable（）
。您可以使用
draggable（）
进行一些配置，但sortable只需很少的工作

下面是一个工作示例和一个示例


$（函数（）{
$（“.drophere”）.sortable({
连接到：“.drophere”
}).disableSelection（）；
});
正文{
位置：固定；
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
#德拉格姆{
列表样式类型：无；
位置：绝对位置；
背景：rgba（0,100200,0.6）；
宽度：100%；
高度：50px；
左：0；
底部：0；
文本对齐：居中；
字体大小：36px；
z指数：999；
}
.左#德拉格姆，.右#德拉格姆{
身高：100%；
}
.放这里{
位置：绝对位置；
背景：rgba（200,100,0,0.1）；
文本对齐：居中；
保证金：0；
}
.顶{
排名：0；
宽度：100%；
高度：50px；
}
.左{
左：0；
宽度：50px；
身高：100%；
}
.底部{
底部：0；
宽度：100%；
高度：50px；
}
.对{
右：0；
宽度：50px；
身高：100%；
}


拖动我



一个id只能在页面上出现一次
#drophere
需要是所有这些元素上的一个类。但是我不知道windows任务栏是什么样子，所以我帮不了你：）@MichaelCoker bro请让它在所有id为“drophere”的div上都可以放置，如果你不知道windows任务栏是什么样子的，忘了它吧，做点什么吧，但要让它在所有的“drophere div”上都可以放置。请…@Makashif你绝对不能“让它在id为#drophere的所有div上都可以掉落”，因为正如Mike所说，你不能在多个元素上拥有相同的id。ID必须是唯一的。您只能有一个
#drophere
。您必须为此使用一个类。有关快照行为，请参见下文。
sortable
？从语义上讲，这个答案是正确的。但是，如果出于任何原因，您需要具有相同id的多个元素（同样，这是不正确的/我不建议这样做），您可以更改可排序选择器，以包含具有
*[id*=drophere]
的所有id。fiddle示例：@使用“捕捉并填充”效果搜索多个放置点，
sortable（）me@smrubin那将是难以置信的糟糕编码。这就像说“如果你用扫帚和一堆胶带，你可以从后座开车”。从技术上讲这可能是真的，但伙计，这是自找麻烦。100%同意。我不推荐。但是，如果OP特别要求这样做，他希望提供一种仍然可以实现的方法。