代码之家 › 专栏 › 技术社区 › Shawn

jqueryui可拖动问题:如何同时拖动多个元素?

draggable jquery-ui

Shawn · 技术社区 · 16 年前

假设我有东西要拖:

<div class="container">
  <div id="draggable-1"></div>
  <div id="draggable-3"></div>
  <div id="draggable-4"></div>
  <div id="draggable-5"></div>
</div>

是否可以设置jqueryui的draggable api以便同时拖动多个可拖动元素? 谢谢。

1 回复 | 直到 15 年前

SarmenHB 16 年前

这是一个猜测,但尝试一下

在容器上不设置样式表,因此将其设置为组。然后这样做

$(function() {

$(".container").draggable();

});

然后,当拖动整个容器时,将拖动为一个包含内部所有元素的组。

下面是一个我所做的工作的例子。

<html>
<head>
<style type="text/css">

#draggable-1,#draggable-2,#draggable-3,#draggable-4,#draggable-5 {

width:100px;
height:100px;
background:red;
margin-bottom:10px;

}

.container {
}
</style>

<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>

<script type="text/javascript">

$(function() {

$(".container").draggable();

});


</script>
</head>
<body>

<div class="container">
  <div id="draggable-1"></div>
  <div id="draggable-3"></div>
  <div id="draggable-4"></div>
  <div id="draggable-5"></div>
</div>


</body>
</html>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Nuñito Calzada · JQuery在spring boot和Thymelaf中从DB自动完成

2 年前

Connor · 使用jquery UI幻灯片制作周围动画

2 年前

provance · 如何获得最新版本的jquery ui?

2 年前

Akhilesh · 当数据目标中有分号或冒号时,带有展开的aria的Button元素不展开

2 年前

chris loughnane · 使用jQuery UI滑块移动和缩放svg元素时遇到问题?

8 年前

Tirkesh Turkesh · 如何在可拖放div中释放项目的精确位置元素上拖放

8 年前

ferralucho · Hightlight jquery datepicker标头选定的星期几

8 年前

Paili · 如何在jQuery自动完成中添加其他内容?

8 年前

monu · 动态嵌套选项卡创建

8 年前