Pragmatic Forums | Highlight drop target sortable list

Apr 2, 2008 1:39pm

torres 3 posts

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

Apr 2, 2008 9:44pm

Christophe P... 28 posts

I should think that relying on the onChange event does the trick. Check out how Prototype-UI does it with its Portal-like features; they’re Scripty-based, AFAIK.

Apr 3, 2008 3:38pm

torres 3 posts

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 7, 2008 9:25am

torres 3 posts

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.

Highlight drop target sortable list

Discussions

Voices

Apr 2, 2008 1:39pm torres 3 posts	Is it possible to highlight a temporary li (drop target) where you want to drop your dragged li? Example

Apr 2, 2008 9:44pm Christophe P... 28 posts	I should think that relying on the `onChange` event does the trick. Check out how Prototype-UI does it with its Portal-like features; they’re Scripty-based, AFAIK.

Apr 3, 2008 3:38pm torres 3 posts	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 <ul> 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 7, 2008 9:25am torres 3 posts	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.