logo标签列表

一个可排序、可放置和可拖动的容器。

jquerydraggablejquery-ui-sortable
3

这个问题与jQuery的UI相关。

有人可以提供一个示例来完成以下操作吗：

  1. 容器A可以进行排序和拖放
  2. 任何元素都可以被拖放到容器A中，然后进行排序。
  3. 任何元素都可以从容器A中拖出来，然后在页面上变为可拖动的。
  4. 容器A也可以在页面上拖动

目前我已经做了以下工作：

$(function() {
    $("#sortable").sortable().droppable();
    $("#sortable").disableSelection();
    $("#drop").droppable({
        accept: "#sortable li",
        drop: function (evt, ui) {
            var $destination = $(this); 
            ui.draggable.appendTo( $destination ); 

        }
    }).draggable();
});

我在这里创建了一个fiddle： http://jsfiddle.net/eEJHb/1/

我遇到的问题是： A）无法使可排序的内容放入容器中。 B）一旦放入容器，我需要将元素拖回可排序列表。

感谢您的帮助！

更新** 我的问题部分原因在于“connectWith”选项。它根本不起作用。相反，我使用了“connectToSortable”选项（作为可拖动的选项），这样我就能够让sortable和draggable一起工作了。

4
你已经尝试过什么？你做了哪些研究？这不是一个代码生成器网站... - Jonny Sooter
所以现在它能工作了吗？你能创建一个新的示例展示它的工作原理吗？ - RufusVS
3个回答
5

在我找到这个链接之前，我也遇到了同样的问题。

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

也许需要一些解释...？ - Igbanam
这里没有什么需要解释的，我拼错了注释。 - user1657904
-2

你可以使用jquery-ui中的互动效果。它提供可拖动和可排序的交互效果。

以下是示例。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接