astilla

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Test page</title>
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js"></script>
    <style type="text/css">
        h3.sectionHeader
        {
            cursor: move;
        }
    </style>
</head>
<body>

<!--
    Seems to be a problem with 'dropOnEmpty:true' when you are trying to drop
    onto a list (in this case <ol>).  When the internal lists are converted
    to just <div>s the problem goes away and everything works as expected.
-->

<div id="sections">
    <div id="section1" class="section">
        <h3 class="sectionHeader">Section 1</h3>
        <ol id="section1Items">
            <li class="item">Item 1</li>
            <li class="item">Item 2</li>
            <li class="item">Item 3</li>
        </ol>
    </div>
    <div id="section2" class="section">
        <h3 class="sectionHeader">Section 2</h3>
        <ol id="section2Items">
            <li class="item">Item 4</li>
            <li class="item">Item 5</li>
            <li class="item">Item 6</li>
        </ol>
    </div>
    <div id="section3" class="section">
        <h3 class="sectionHeader">Section 3</h3>
        <ol id="section3Items">
        </ol>
    </div>
</div>

<script type="text/javascript">
//<![CDATA[

    var sections = ['section1Items', 'section2Items', 'section3Items'];

    Sortable.create('section1Items',{tag:'li',dropOnEmpty:true, containment:sections, only:'item'});
        Sortable.create('section2Items',{tag:'li',dropOnEmpty:true, containment:sections, only:'item'});
        Sortable.create('section3Items',{tag:'li',dropOnEmpty:true, containment:sections, only:'item'});
        Sortable.create('sections',{tag:'div', only:'section',handle:'sectionHeader'});

//]]>
</script>

</body>
</html>