I am trying to implement draggale + sortable on two datatables.
I use the option item:'tr' in sortable to make the rows of the
datatable sortable.
But there is no such option in draggable.When i apply draggable on my
table it makes the whole table draggable but i want only rows to be
draggable.
Please provide some inputs
This is my code:
<f:view>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1"/>
<title>
</title>
<link type="text/css" href="ui.all.css" rel="stylesheet" />
<link type="text/css" href="demos.css" rel="stylesheet" />
<script type="text/javascript" src="resources/javascript/
jquery-1.3.2.js"></script>
<script type="text/javascript" src="resources/javascript/
ui.core.js"></script>
<script type="text/javascript" src="resources/javascript/
ui.accordion.js"></script>
<script type="text/javascript" src="resources/javascript/
ui.sortable.js"></script>
<script type="text/javascript" src="resources/javascript/
ui.draggable.js"></script>
<script type="text/javascript" src="resources/javascript/
ui.droppable.js"></script>
<style type="text/css">
.demo ul {
list-style-type: none;
margin-left: 250px;
padding: 0;
margin-bottom: 10px; }
.demo li {
margin: 5px;
padding: 5px;
width: 150px; }
</style>
<script type="text/javascript">
$(function() {
$("#mainForm\\:sortable1,#mainForm\\:sortable2").sortable({
revert: true ,items: 'tr',connectWith: '.rich-table'});
$("#mainForm\\:draggable").draggable({
connectToSortable: '#mainForm\\:sortable1', helper:
'clone',revert:'invalid'});
$("#draggable1").draggable({
connectToSortable: '#mainForm\\:sortable1', helper:
'clone',revert:'invalid'});
$("li").disableSelection();
$("#accordion").accordion({
icons: {
header: "ui-icon-circle-arrow-e",
headerSelected: "ui-icon-circle-arrow-s"
},
collapsible: true});
});
</script>
</head>
<body onload="onLoadFunctionIntro();">
<h:form id="mainForm">
<div id="MainRightBody">
<div id="accordion" style="margin-left:250px;">
<h3><a href="#">LEFT PANEL</a></h3>
<div id="subDiv">
<p>-----------------<BR>-----------------<BR>-----------------</
p>
</div>
</div>
<div class="demo">
<h:panelGrid columns="3" >
<h:panelGroup id="sortable1" >
<rich:dataTable var="allList"
value="#{IntroBean.allLists}" >
<rich:column>
<f:facet name="header">
<h:outputText
value="Model" />
</f:facet>
<h:outputText
value="#{allList.MODEL}" />
<br>-----------------<br>
<h:outputText
value="#{allList.YEAR}" />
<h:outputText
value="#{allList.MANUFACTURER}" />
<br>-----------------<br>
<h:outputText
value="#{allList.COLOR}" />
</rich:column>
</rich:dataTable>
</h:panelGroup>
<h:panelGroup id="draggable" >
<rich:dataTable var="allList"
value="#{IntroBean.allLists}" >
<rich:column >
<f:facet name="header">
<h:outputText
value="Model" />
</f:facet>
<h:outputText
value="#{allList.MODEL}" />
<h:outputText
value="#{allList.COLOR}" />
<br>-----------------<br>
<h:outputText
value="#{allList.YEAR}" />
<br>-----------------<br>
<h:outputText
value="#{allList.MANUFACTURER}" />
</rich:column>
</rich:dataTable>
</h:panelGroup>
<h:panelGroup>
<li id="draggable1"
class="ui-state-highlight">Drag me down</li>
</h:panelGroup>
</h:panelGrid>
</div>
</div>
</h:form>
</body>
</html>
</f:view>
--
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en.
