Skip to main content

Search and Top Navigation

#7012 closed bug (notabug)

Opened February 18, 2011 03:36AM UTC

Closed February 18, 2011 05:08AM UTC

Adding a tab with tab content containing an object that is droppable does not work

Reported by: asleepatdesk Owned by: asleepatdesk
Priority: minor Milestone: 1.9.0
Component: ui.droppable Version: 1.8.6
Keywords: Cc:
Blocked by: Blocking:
Description

The tab content is a table containing a td of class = stage. Any object with class stage should be droppable. But when it is added the draggable cannot be dropped on it. Complete code following:

<html>
    <head>
        <title>UI test</title>
        <link rel="stylesheet" type="text/css" href="../../Styles/Themes/Default/jquery-ui-1.8.6.custom.css"  />

        <style type="text/css">
	        #tabs { margin-top: -0.5em; margin-left: -.2em; height:19px; border-bottom:1px solid #B2B2B2;}
	        #tabs ul { border:0px;}	    
	        #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
	        #tabContainer { margin-left: -0.4em; }
	        #add_tab { cursor: pointer;  font: bold 84%'trebuchet ms',helvetica,sans-serif; }
	    
	        #tblUIMain { margin-top: -0.1em; }
	        #centerWell { background-color:#FFFFFF; }
	        #rightWell { background-color:#FFFFFF; }
	        #leftWell { background-color:#E9E9E9; }
	    
           
            .stageContainer{position: relative; height:550px; width:100%}
            .tblStage { position:absolute; top:-1; left:1px; height:550px; width:100%; border:1px solid blue;}
            .stage { width: 100%; height:500px; padding: 0.0em;border:1px solid purple;}
            
       
            .pageObject{height:15px; width:15px; background-color:#EAEEFF; border:1px solid blue;}

        </style>

<script language = "javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
	    <script language = "javascript" type="text/javascript" src="jquery-ui-1.8.5.custom.min.js"></script>
        <script language = "javascript" type="text/javascript" src="jquery.ui.position.js"></script>
        <script language = "javascript" type="text/javascript" src="jquery.ui.core.js"></script>
        <script language = "javascript" type="text/javascript" src="jquery.ui.widget.js"></script>
        <script language = "javascript" type="text/javascript" src="jquery.ui.mouse.js"></script>
        <script language = "javascript" type="text/javascript" src="jquery.ui.draggable.js"></script>
        <script language = "javascript" type="text/javascript" src="jquery.ui.droppable.js"></script>
        <script language = "javascript" type="text/javascript" src="jquery.ui.resizable.js"></script>

<script type="text/javascript">


            $(function () {

                var $tab_title_input = $('#tab_title')
                var tab_counter = 2;

                // tabs init with a custom tab template and an "add" callback filling in the content

                var $tabs = $('#tabs').tabs({
                    tabTemplate: '<li><a href="#{href}">#{label}</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>',

                    add: function (event, ui) {
                        $(ui.panel).append('<div style="border:1px solid red;" class = "stage"></div>');
                    }
                });

                // modal dialog init: custom buttons and a "close" callback reseting the form inside

                var $dialog = $('#dialog').dialog({
                    autoOpen: false,
                    modal: true,
                    buttons: {
                        'Add': function () {
                            addTab();
                            $(this).dialog('close');
                        },
                        'Cancel': function () {
                            $(this).dialog('close');
                        }
                    },
                    open: function () {
                        $tab_title_input.focus();
                    },
                    close: function () {
                        $form[0].reset();
                    }
                });

                // addTab form: calls addTab function on submit and closes the dialog
                var $form = $('form', $dialog).submit(function () {
                    addTab();
                    $dialog.dialog('close');
                    return false;
                });

                // actual addTab function: adds new tab using the title input from the form above
                function addTab() {
                    var tab_title = $tab_title_input.val() || 'Tab ' + tab_counter;
                    $tabs.tabs('add', '#tabs-' + tab_counter, tab_title);
                    tab_counter++;
                }

                // addTab button: just opens the dialog
                $('#add_tab').button().click(function () {
                    $dialog.dialog('open');
                });


                $('#tabs span.ui-icon-close').live('click', function () {
                    var index = $('li', $tabs).index($(this).parent());
                    $tabs.tabs('remove', index);
                });

                $('.pageObject').draggable({
                    helper: 'clone',
                    cursor: 'move'
                });

                $('*.stage').droppable({
                    accept: '.pageObject',
                    drop: function (event, ui) {
                        $(this).append($(ui.helper).clone());
                    }
                });

            });
	
    </script>

   </head>
   <body>
   <table id = "tblUIMain" border ="0" style = "width:100%; height: 600px; vertical-align:top; margin: 0px; border-color:red" cellpadding = "0" cellspacing = "0">
        <tr style = "vertical-align:top;">
            <td id = "leftWell" style="width:125px;" class="expanded">
                <table border= "0" cellpadding = "0" cellspacing = "0" width="100%" style = "border-color:blue;background-color:#E9E9E9; vertical-align:top">
                    
                    <tr style = "height:10px"><td colspan="3"> </td></tr>
                    
                    <!-- Page Control -->
                    <tr valign = "top">
                        <td style="width:5px;"> </td>
                        <td valign = "top" align="left">
                            <div id = "divPageObject" title = "Page Object" class="pageObject">
                                <table style = "width:100%" border = "0">
                                    <tr>
                                        <td colspan = "1" width = "99%"></td>
                                        <td colspan = "1" width = "*"></td>
                                    </tr>
                                </table>
                            </div>
                        </td>
                        <td>
                            <label>Page Object</label>
                        </td>
                    </tr>
                </table>
            </td>
            
            <td id = "centerWell" style = "vertical-align:top;">
                    <div id="tabs">
                    <!-- the tab strip -->
		            <ul id = "tabContainer">
                        <li><button id="add_tab" title = "Add Tab"><b>New Tab</b></button></li>
			            <li><a href="#tab-0"><span>System</span></a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>
		            </ul>
                    <!-- end tab strip -->
                    <div id="tab-0" style = "border:1px solid green;" class="stage"></div>
	            </div>
	        </td>
            <td id = "rightWell" style = "width:225px; vertical-align:top;">
                
            </td>
        </tr>
        <tr>
            <td>
                <div id="dialog" title="Tab data" >
			        <form>
                        <table><tr><td style="height:50px">
				        <fieldset class="ui-helper-reset">
					        <label for="tab_title">Title</label>
					        <input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all" />
					        
				        </fieldset>
                        </td></tr></table>
			        </form>
		        </div>
            </td>
        </tr>
    </table>
</body>
</html>


Attachments (0)
Change History (3)

Changed February 18, 2011 03:59AM UTC by rdworth comment:1

_comment0: See the box in the red message above the text field: "Please use jsFiddle or jsbin to provide test cases instead of pasting large blocks of code in the ticket."1298001575820765

See the message in the red box above the text field: "Please use jsFiddle or jsbin to provide test cases instead of pasting large blocks of code in the ticket."

Changed February 18, 2011 03:59AM UTC by rdworth comment:2

owner: → asleepatdesk
status: newpending

Changed February 18, 2011 05:08AM UTC by scottgonzalez comment:3

resolution: → invalid
status: pendingclosed

Elements added in the future aren't automatically made droppable. Please use the forums for help.