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 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 |
|---|
Changed February 18, 2011 03:59AM UTC by comment:2
| owner: | → asleepatdesk |
|---|---|
| status: | new → pending |
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."