1. 技术文章
  2. Getting jQuery sortable, droppable and draggable to work together

Getting jQuery sortable, droppable and draggable to work together

由 穿精又带淫゛_ 提交于 2019-12-03 14:32:56

Your problem for #2 is for $("#divReportGrouping div.item") the helper should be set to 'original' instead of clone, and on drop the one that is appended to #divReportRows is the item itself and not the clone. Here is the working sample: http://jsfiddle.net/3zpV6/2/

Here is a working solution I came up with that drags/drops/sorts. Hope it helps someone.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>

    <style type="text/css">
        #DraggableList { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; border: 1px; border-style:solid; }
        #DroppableList { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; border: 1px; border-style:solid; }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#DraggableList li").draggable({
                revert: 'invalid'
            });
            $("#DroppableList").sortable();

            $("#DroppableList").droppable({
                drop: function (event, ui) {
                // If test in place to ignore the sortable instance of the droppable function
                    if ($(ui.draggable).hasClass("ui-draggable-dragging")) {
                        var itemText = $(ui.draggable).text();
                        $(ui.draggable).empty();
                        $('#DroppableList').append($('<li>').text(itemText).addClass("dropped"));
                    }
                }
            });

            $('#DroppableList li').live('dblclick', function (evt) {
                evt.preventDefault();
                $(this).remove();
            });
        });
    </script>


    </head>
    <body>
        <form id="form1" runat="server">
            <div id="ListDiv">
                <ul id="DraggableList">
                    <li>Linebacker</li>
                    <li>Tackle</li>
                    <li>Safety</li>
                    <li>Cornerback</li>
                    <li>Guard</li>
                    <li>End</li>
                </ul>
            </div>
            <div>
                <ul id="DroppableList">
                </ul>
            </div>
        </form>
    </body>
    </html>
标签
jquery
jquery-ui
droppable
jquery-ui-draggable
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!