Hello,
I was hoping someone here could help out a jQuery newbie. What I want
to do is, if I have two list that are identical, when I drag and drop
one of the items from one of the identical list, the changes will
reflect on the other list as well. I hope that makes some sense.
Below are two identical list, but when dragging an item on one of the
identical list, it doesn't reflect the changes to the other list.
Please let me know if you need more details, or if I need to explain
things a bit clearer. Upfront, I want to thank you guys for the time
you put into helping me out with this issue.
Thanks,
Matt
***CODE****
<html>
<head>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="../interface.js"></script>
<script type="text/javascript">
$(document).ready(
function () {
$('div.groupWrapper').Sortable(
{
accept: 'groupItem',
helperclass: 'sortHelper',
activeclass : 'sortableactive',
hoverclass : 'sortablehover',
handle: 'div.itemHeader',
tolerance: 'pointer',
onChange : function(ser)
{
},
onStart : function()
{
$.iAutoscroller.start(this, document.getElementsByTagName('body'));
},
onStop : function()
{
$.iAutoscroller.stop();
}
}
);
}
);
</script>
<style type="text/css" media="all">
html
{
height: 100%;
}
img{
border: none;
}
body
{
background: #fff;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.groupWrapper
{
width: 32%;
float: left;
margin-right: 1%;
min-height: 400px;
}
.serializer
{
clear: both;
}
.groupItem
{
margin-bottom: 20px;
}
.groupItem .itemHeader
{
line-height: 28px;
background-color: #DAFF9F;
border-top: 2px solid #B5EF59;
color: #000;
padding: 0 10px;
cursor: move;
font-weight: bold;
font-size: 16px;
height: 28px;
position: relative;
}
.groupItem .itemHeader a
{
position: absolute;
right: 10px;
top: 0px;
font-weight: normal;
font-size: 11px;
text-decoration: none;
}
.sortHelper
{
border: 3px dashed #666;
width: auto !important;
}
.groupWrapper p
{
height: 1px;
overflow: hidden;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="sort1" class="groupWrapper">
<div id="Item1" class="groupItem">
<div class="itemHeader">Item1</div>
</div>
<div id="Item2" class="groupItem">
<div class="itemHeader">Item2</div>
</div>
</div>
<div id="sort1" class="groupWrapper">
<div id="Item1" class="groupItem">
<div class="itemHeader">Item1</div>
</div>
<div id="Item2" class="groupItem">
<div class="itemHeader">Item2</div>
</div>
</div>
</body>
</html>
