Hello,
My first play with this so please be kind.
I have two sortable containers one has pages from a document the other
has tabs. I would like to drag the tabs onto the pages but not allow
the user to change the page order. So far I have mashed together the
following,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<title>Drag Drop</title>
<script language="javascript"
src="lib/prototype.js"></script>
<script language="javascript"
src="src/scriptaculous.js"></script>
<script language="JavaScript">
sections =
[''group1'',''group2'',''group3''];
function createNewSection(name) {
var name = $F(''sectionName'');
if (name != '''') {
var newDiv = Builder.node(''div'', {id:
''group'' + (sections.length +
1), className: ''section'', style:
''display:none;'' }, [
Builder.node(''h3'', {className:
''handle''}, name)
]);
sections.push(newDiv.id);
$(''page'').appendChild(newDiv);
Effect.Appear(newDiv.id);
destroyLineItemSortables();
createLineItemSortables();
createGroupSortable();
}
}
function createLineItemSortables() {
for(var i = 0; i < sections.length; i++) {
Sortable.create(sections[i],{tag:''div'',dropOnEmpty: true,
containment: sections,only:''lineitem''});
}
}
function destroyLineItemSortables() {
for(var i = 0; i < sections.length; i++) {
Sortable.destroy(sections[i]);
}
}
function createGroupSortable() {
Sortable.create(''page'',{tag:''div'',only:''section'',handle:''handle''});
}
function getGroupOrder() {
var sections = document.getElementsByClassName(''section'');
var alerttext = '''';
sections.each(function(section) {
var sectionID = section.id;
var order = Sortable.serialize(sectionID);
alerttext += sectionID + '': '' + Sortable.sequence(section)
+ ''\n'';
});
alert(alerttext);
return false;
}
</script>
<style>
body, div {
font-family: Arial, Helvetica;
font-size: 11px;
}
div.section,div#createNew {
border: 1px solid #CCCCCC;
margin: 30px 5px;
padding: 0px 0px 10px 0px;
background-color: #EFEFEF;
}
div#createNew input { margin-left: 5px; }
div#createNew h3, div.section h3{
font-size: 14px;
padding: 2px 5px;
margin: 0 0 10px 0;
background-color: #CCCCCC;
display: block;
}
div.section h3 {
cursor: move;
}
img.lineitem {
margin: 10px 10px 10px 10px;
padding: 15px;
background-color: #C1C1C1;
cursor: move;
width: 100px;
border: thin dashed #000000
}
h1 {
margin-bottom: 0;
font-size: 18px;
}
</style>
</head>
<body>
<div id="page">
<div id="group1" class="section">
<h3 class="handle">pages</h3>
<img src="1.jpg" class="lineitem" alt="" >
<img src="2.jpg" class="lineitem" alt="">
<img src="3.jpg" class="lineitem" alt="" >
<img src="4.jpg" class="lineitem" alt="">
<img src="5.jpg" class="lineitem" alt="" >
<img src="6.jpg" class="lineitem" alt="">
<img src="7.jpg" class="lineitem" alt="" >
<img src="8.jpg" class="lineitem" alt="">
<img src="9.jpg" class="lineitem" alt="" >
<img src="10.jpg" class="lineitem" alt="">
<img src="11.jpg" class="lineitem" alt=""
>
</div>
<div id="group2" class="section">
<h3 class="handle">tabs</h3>
<img src="tab.jpg" alt="" border="0"
class="lineitem" >
<img src="tab.jpg" alt="" border="0"
class="lineitem" >
<img src="tab.jpg" alt="" border="0"
class="lineitem" >
<img src="tab.jpg" alt="" border="0"
class="lineitem" >
<img src="tab.jpg" alt="" border="0"
class="lineitem" >
<img src="tab.jpg" alt="" border="0"
class="lineitem" >
<img src="tab.jpg" alt="" border="0"
class="lineitem" >
<img src="tab.jpg" alt="" border="0"
class="lineitem" >
<img src="tab.jpg" alt="" border="0"
class="lineitem" >
<img src="tab.jpg" alt="" border="0"
class="lineitem" >
</div>
</div>
<script type="text/javascript">
// <![CDATA[
Sortable.create(''group1'',{tag:''img'',dropOnEmpty:
true,
overlap:''horizontal'',constraint: false, containment:
sections,only:''lineitem''});
Sortable.create(''group2'',{tag:''img'',dropOnEmpty:
true,
overlap:''horizontal'',constraint: false, containment:
sections,only:''lineitem''});
Sortable.create(''group3'',{tag:''img'',dropOnEmpty:
true,
overlap:''horizontal'',constraint: false, containment:
sections,only:''lineitem''});
// ]]>
</script>
</body>
</html>
ideally it would nice if sortable had a revert like draggable.
Cheers,
Jason
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---