i did some searching through the archives and didn't really find an
answer to my question, so i'm going to just ask it.

i have a situation where there are 3 sortable lists.  list1, list2,
and list3  i need list2 to accept divs from all 3 lists, but list1 and
list3 to only accept divs from the list1 and list3   i've added two
classes to the divs in my sortables: .rail for list1 and list3, and
.center for list2.  i then added the appropriate accept options to my
sortables code.  seems to make no difference at all.  any help would
be appreciated as i really need this sort of feature to work.  here's
the code i'm working with:

<html>
<head>
        <title>test page</title>
        <script src="assets/scriptaculous-js-1.6.1/src/prototype.js"
type="text/javascript"></script>
        <script src="assets/scriptaculous-js-1.6.1/src/scriptaculous.js"
type="text/javascript"></script>
<style>
        #container {width: 550px;margin: 30px auto 0px auto;padding: 0px;}
        #list1, #list2, #list3 {padding-bottom: 10px; border:1px solid #000;}
        #list1 div, #list2 div, #list3 div {color: #FFF;border:1px solid
#666;background-color: #7F7D7D;padding: 2px 5px;width:
150px;text-align: center;margin: 2px;font-size:
10px;font-family:verdana;cursor:move;}
</style>
</head>

<body>

<div id="container">
        
        <div id="list1" style="float:left;">
                <div class="rail" id="left1">left 1</div>
                <div class="rail" id="left2">left 2</div>
                <div class="rail" id="left3">left 3</div>
                <div class="rail" id="left4">left 4</div>
                <div class="rail" id="left5">left 5</div>
        </div>
        
        <div id="list2" style="float:left;">
                <div class="center" id="center1">center 1</div>
                <div class="center" id="center2">center 2</div>
                <div class="center" id="center3">center 3</div>
                <div class="center" id="center4">center 4</div>
                <div class="center" id="center5">center 5</div>
        </div>
        
        <div id="list3" style="float:left;">
                <div class="rail" id="right1">right 1</div>
                <div class="rail" id="right2">right 2</div>
                <div class="rail" id="right3">right 3</div>
                <div class="rail" id="right4">right 4</div>
                <div class="rail" id="right5">right 5</div>
        </div>
        
</div>

<script>
        Sortable.create("list1",
{tag:'div',dropOnEmpty:true,constraint:false,containment:["list1","list2","list3"],accept:["rail"]});
        Sortable.create("list2",
{tag:'div',dropOnEmpty:true,constraint:false,containment:["list1","list2","list3"]});
        Sortable.create("list3",
{tag:'div',dropOnEmpty:true,constraint:false,containment:["list1","list2","list3"],accept:["rail"]});
</script>

</body>
</html>
_______________________________________________
Rails-spinoffs mailing list
[email protected]
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs

Reply via email to