drag and drop question

Discussion in 'JavaScript' started by psim, Nov 21, 2008.

0
  1. #1
    this is the code:

    <!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">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>script.aculo.us functional test</title>
    <script type="text/javascript" src="../../lib/prototype.js"></script>
    <script type="text/javascript" src="../../src/effects.js"></script>
    <script type="text/javascript" src="../../src/dragdrop.js"></script>
    <script type="text/javascript">
    //<![CDATA[
    var myStartEffect = function(element) {
    element._opacity = Element.getOpacity(element);
    new Effect.Opacity(element, {duration:0.2, from:element._opacity, to:0.7});
    new Effect.Highlight(element, {});
    }
    //]]>
    </script>
    <style type="text/css">
    /*<![CDATA[*/
    h1 {font-size: 1.2em; text-align:center;}
    li {
    margin: 5px auto;
    padding: 100px;
    width: 200px;
    text-align:center;
    list-style-type:none;
    border: 2px solid #779;
    background-color: #dde
    }
    /*]]>*/
    </style>
    </head>

    <body>
    <h1>No delay sortable</h1>

    <ul id="sort1">
    <li id="s1_1" >one</li>
    <li id="s1_2">two</li>
    <li id="s1_3">three</li>
    <li id="s1_4">four</li>
    <li id="s1_5">five</li>

    </ul>

    <input name="insert" type="button" onClick=" $('sort1').insert({bottom: '<li>six</li>'}); " />
    <script type="text/javascript" charset="utf-8">
    Sortable.create('sort1', {starteffect: myStartEffect});
    </script>

    </body>
    </html>

    I can drag and drop the list one,two three,four,five but when i press the button to create the sixth item it is disabled,i can't drag and drop it...

    what i am doing wrong??
    is there any way to do this???

    thanks in advance
     
    psim, Nov 21, 2008 IP
  2. GreatMetro

    GreatMetro Peon

    Messages:
    117
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You need to call the Sortable.create again after adding the new element and also give the element an id.

    
<input name="insert" type="button" onClick="$('sort1').insert({bottom: '<li id=\'s1_6\'>six</li>'}); Sortable.create('sort1', {starteffect: myStartEffect});" />
<script type="text/javascript" charset="utf-8">
Sortable.create('sort1', {starteffect: myStartEffect});
</script>
    Code (markup):
     
    GreatMetro, Nov 21, 2008 IP