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

时间:2010-01-01 07:55:54

标签: jquery-ui draggable

假设我有拖拽的东西:

<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的可拖动api,这样我可以同时拖动多个可拖动元素? 谢谢。

1 个答案:

答案 0 :(得分:2)

这是猜测,但请尝试

在容器上没有设置样式表,因此它被设置为一个组。然后这样做

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