Skip to main content

Search and Top Navigation

Ticket #3979: sortable.connectWith.html


File sortable.connectWith.html, 1.5 KB (added by Marc Diethelm, February 12, 2009 11:52AM UTC)

Testcase

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Sortable connectWith fails</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.3.1.js"></script>
    <script type="text/javascript" src="http://view.jquery.com/trunk/ui/ui/ui.core.js"></script>
    <script type="text/javascript" src="http://view.jquery.com/trunk/ui/ui/ui.sortable.js"></script>

    <style type="text/css">
        div { border:1px solid black; margin: 5px 5px 20px 5px; }
    </style>
</head>

<body>
    #sortable1
    <div id="sortable1">
        <div>sortable item 1</div>
        <div>sortable item 2</div>
    </div>


    #sortable2 (connectWith: "#sortable1") <!-- produces error in Firefox 3.x -->
    <div id="sortable2">
        <div>sortable item 1</div>
        <div>sortable item 2</div>
    </div>


    #sortable3 (connectWith: ["#sortable1"])
    <div id="sortable3">
        <div>sortable item 1</div>
        <div>sortable item 2</div>
    </div>


    <script type="text/javascript">

        $(function () {

            $("#sortable1").sortable();

            $("#sortable2").sortable({
                connectWith: "#sortable1"
            });

            $("#sortable3").sortable({
                connectWith: ["#sortable1"]
            });

        });

    </script>


</body>
</html>

Download in other formats:

Original Format