可排序的、可卸下的、可拖动的容器
可排序的、可卸下的、可拖动的容器
提问于 2013-03-28 14:37:01
这个问题与jQuery的UI有关。
有人能提供这样的例子吗？
- 容器A是可排序的和可卸下的
- 任何元素都可以拖到Container中，然后排序。
- 任何元素都可以从Container中拖出，然后简单地在页面周围拖动。
- 容器A在页面周围也是可拖动的
到目前为止，这就是我所拥有的：
$(function() {
$("#sortable").sortable().droppable();
$("#sortable").disableSelection();
$("#drop").droppable({
accept: "#sortable li",
drop: function (evt, ui) {
var $destination = $(this);
ui.draggable.appendTo( $destination );
}
}).draggable();
});我在这里做了一个小提琴：http://jsfiddle.net/eEJHb/1/
我遇到的问题：( A)无法将可排序放到容器B中(一旦进入容器，我需要将元素拖回可排序列表
谢谢你的帮忙!
UPDATE **部分问题在于选项"connectWith“。只是不起作用。相反，我使用了选项"connectToSortable“(作为可拖选项中的一个选项)，并且能够使可排序的和可拖动的协同工作。
回答 3
Stack Overflow用户
发布于 2016-03-09 06:51:10
在我找到这之前我也遇到过同样的问题
$(function () {
$("#timetable .items").sortable({
connectWith: "ul"
});
$("ul[id^='available']").draggable({
helper: "clone",
connectToSortable: ".items"
});
});<style type="text/css">
.bar {
width: 100px;
height: 20px;
margin: 2px;
border: 1px solid black;
background-color: lightgreen;
text-align: center;
float: left;
margin: 2px;
padding: 2px;
cursor: pointer;
border-radius: 3px;
}
.list {
background-color: lightblue;
border: 1px solid gray;
}
.items .ui-selected {
background: red;
color: white;
font-weight: bold;
}
.items {
list-style-type: none;
margin: 0;
padding: 0;
width: 100px;
}
.items li {
margin: 2px;
padding: 2px;
cursor: pointer;
border-radius: 3px;
}
.weekday {
float: left;
}
.availablelist {
background-color: orange;
display: inline;
}
</style><link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://www.pureexample.com/js/lib/jquery.ui.touch-punch.min.js"></script>
<div style="float:left;width:500px;">
<div>Available employee</div>
<ul id="available1" class="items">
<li class="list availablelist">Jhonny</li>
</ul>
<ul id="available2" class="items">
<li class="list availablelist">Tim</li>
</ul>
<ul id="available3" class="items">
<li class="list availablelist">George</li>
</ul>
<ul id="available4" class="items">
<li class="list availablelist">Melissa</li>
</ul>
<ul id="available5" class="items">
<li class="list availablelist">Alice</li>
</ul>
</div>
<div style="clear:both"></div>
<div id="timetable" style="float:left;width:700px;">
<div style="text-align:center">Time table</div>
<div class="weekday">Monday
<ul class="items">
<li class="list">Jhonny</li>
<li class="list">Tim</li>
<li class="list">George</li>
<li class="list">Melissa</li>
<li class="list">Alice</li>
</ul>
</div>
<div class="weekday">Tuesday
<ul class="items">
<li class="list">Jhonny</li>
<li class="list">Tim</li>
<li class="list">George</li>
<li class="list">Melissa</li>
<li class="list">Alice</li>
</ul>
</div>
<div class="weekday">Wednesday
<ul class="items">
<li class="list">Jhonny</li>
<li class="list">Tim</li>
<li class="list">George</li>
<li class="list">Melissa</li>
<li class="list">Alice</li>
</ul>
</div>
<div class="weekday">Thursday
<ul class="items">
<li class="list">Jhonny</li>
<li class="list">Tim</li>
<li class="list">George</li>
<li class="list">Melissa</li>
<li class="list">Alice</li>
</ul>
</div>
<div class="weekday">Friday
<ul class="items">
<li class="list">Jhonny</li>
<li class="list">Tim</li>
<li class="list">George</li>
<li class="list">Melissa</li>
<li class="list">Alice</li>
</ul>
</div>
<div class="weekday">Saturday
<ul class="items">
<li class="list">Jhonny</li>
<li class="list">Tim</li>
<li class="list">George</li>
<li class="list">Melissa</li>
<li class="list">Alice</li>
</ul>
</div>
<div class="weekday">Sunday
<ul class="items">
<li class="list">Jhonny</li>
<li class="list">Tim</li>
<li class="list">George</li>
<li class="list">Melissa</li>
<li class="list">Alice</li>
</ul>
</div>
</div>
Stack Overflow用户
发布于 2013-03-28 15:06:41
我建议您查看这些文档：
http://jqueryui.com/sortable/#connect-lists
http://jqueryui.com/draggable/#sortable
这些问题的答案是：
Stack Overflow用户
发布于 2013-03-28 14:48:51
您可以使用jquery中的交互。它提供了可拖动的和可排序的交互。
下面是一些例子。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15684644
复制相关文章
相似问题
腾讯云开发者
