可排序、可拖放和可拖动的容器

Posted 2023-05-08

技术标签:

【中文标题】可排序、可拖放和可拖动的容器【英文标题】：A container that is sortable, droppable and draggable 【发布时间】：2013-03-19 01:21:32 【问题描述】：

这个问题与 jQuery 的 UI 有关。

谁能提供一个例子：

容器 A 是可排序和可放置的可以将任何元素拖入容器 A 中然后进行排序。任何元素都可以从容器 A 中拖出，然后简单地在页面中拖动即可。容器 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）一旦进入容器，我需要将元素拖回可排序列表

感谢您的帮助！

更新** 我的部分问题在于选项“connectWith”。它根本行不通。相反，我使用了“connectToSortable”选项（作为可拖动选项中的一个选项），我能够让可排序和可拖动选项一起工作。

【问题讨论】：

你试过什么？你做了什么研究？这不是代码生成器网站... 我更新了我的问题所以你现在工作了吗？你能创建一个新的小提琴来展示它的工作原理吗？ 【参考方案1】：

在找到this之前我遇到了同样的问题

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

【讨论】：

也许可以解释一下...？没有什么可以解释的，我拼错了评论【参考方案2】：

我建议您查看此文档：

http://jqueryui.com/sortable/#connect-lists

http://jqueryui.com/draggable/#sortable

以及这些问题的答案：

Getting jQuery sortable, droppable and draggable to work together

jQuery-UI Draggable and Sortable

【讨论】：

【参考方案3】：

您可以使用来自 jquery-ui 的交互。它提供可拖动和可排序的交互。

Here are examples.