Question

Does anyone know of a way to implement a drag and drop feature with ColdFusion’s CFLAYOUT? I’ve tried creating a cflayout with tabs and jQuery’s sortable plugin, but can’t get it to work. Here’s the code I’m working with:

<script type="text/javascript" src="/scripts/jQuery_MenuDragDrop.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $("ul.x-tab-strip").sortable({
            placeHolder: "ul.x-tab-strip",
            connectWith: "ul.x-tab-strip",
            update: function() {
                alert("test");
            }
        });
    });
</script>

<cfset variables.Tabs   = ["test 1", "test 2", "test 3"]>
<cfset variables.TabIDs = [1, 2, 3]>

<cflayout type="tab" name="ProjectTabs" style="width:975px;">
    <cfloop index="i" from="1" to="#ArrayLen(variables.Tabs)#">
        <cflayoutarea name="ProjectTab#variables.TabIDs[i]#" title="#variables.Tabs[i]#"></cflayoutarea>
    </cfloop>
</cflayout>

Thanks!

Answer 1

Give this a try:

<script type="text/javascript"> 
    window.onload = function(){ 
        setupSortable(); 
    }; 

    setupSortable = function(){ 
        $(".x-tab-strip").sortable({ 
            update: function() { alert("test"); } 
        }); 
    } 
</script>

One thing i found about jQuery is it helps to try to dump what you think your selecting and work from there. I dropped a console.log($('ul.x-tab-strip')); at the top of the document.ready it didn’t print anything – but setting it up in the timeout it dumped the expected target. You may have to fiddle with the timeout a bit too.

Honestly I would consider looking into alternatives to cflayout for tabs if you can. CF generated code is messy and can be hard to work with at times. I’m partial to jQuery tools: http://flowplayer.org/tools/tabs/index.html