Apr 7, 2008
Generic-user-small torres 3 posts

Topic: Prototype and script.aculo.us / Highlight drop target sortable list

Okay finaly found a solution for this. You can download a patched version of scriptaculous on http://tankut.googlepages.com/home.

Only thing you need to do is add the css class .emptyPlaceMarker with you disired options to you HTML page or external css file.
 
Apr 3, 2008
Generic-user-small torres 3 posts

Topic: Prototype and script.aculo.us / Highlight drop target sortable list

Thx for the reply.

I used the onChange method to add a temp LI to the sortableList. If I move the selected LI down the list it works correctly but when I move the selected LI up, my temp LI isn’t shown in the correct place. This is because I always subtract the TOP attribute of de temp LI with the height of the selected LI.

Do you have any idea how I could fix this problem?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Sortable Simple Example</title>
        <script type="text/javascript" src="scripts/prototype.js"></script>
        <script type="text/javascript" src="scripts/scriptaculous.js"></script>
        <script type="text/javascript">
            window.onload = function() {
                Sortable.create('sortableList',{onChange:test,onUpdate:test2});
            }

            function test(el){
                //$('message').innerHTML = "left: " + el.offsetLeft + " top: " + el.offsetTop + " width: " + el.offsetWidth + " height: " + el.offsetHeight;

                $('message').innerHTML = "";

                if(!$('temp')){
                    objList = $('sortableList');

                    //create the new nodes
                    objListElement = document.createElement('li');
                    objListElement.style.left = el.offsetLeft + "px";
                    objListElement.style.top = el.offsetTop + "px";
                    objListElement.style.position = "absolute";
                    objListElement.innerHTML = "place test";
                    objListElement.id = "temp";

                    objList.appendChild(objListElement);
                }

                $('temp').style.width = el.offsetWidth + "px";
                $('temp').style.height = el.offsetHeight + "px";
                $('temp').style.left = el.offsetLeft + "px";
                $('temp').style.top = el.offsetTop - el.offsetHeight + "px";
                $('temp').style.opacity = "0.5";
            }

            function test2(){
                $('temp').remove();
            }
        </script>
        <style type="text/css">        
            #temp{
                border-style:dashed;
                border-color:#000000;
                border-width:1px;
                background-color:#CCCCCC;
            }

            #sortableList{
                list-style-type:none;
                margin:0px;
            }

            #sortableList li{
                padding:5px;
                width:200px;
            }
        </style>
    </head>
    <body>
        <div id="message"></div>

        <div>
            <h1>Sortable &lt;ul&gt; list</h1>
            <ul id="sortableList">
                <li>
                    Q1
                    <br />
                    This is a test
                    <br />
                    <input type="text" id="test" />
                </li>
                <li>two</li>
                <li>three</li>
                <li>four</li>
                <li>five</li>
            </ul>
        </div>
        <div>
    </body>
</html>
 
Apr 2, 2008
Generic-user-small torres 3 posts

Topic: Prototype and script.aculo.us / Highlight drop target sortable list

Is it possible to highlight a temporary li (drop target) where you want to drop your dragged li?

Example

3 posts