I have one div that contains a bunch of draggable div objects. This main container is called "floater" and will scroll down the screen in relation to mouse scroll.
I also have a div called validtargets, which is populated with a table providing a grid appearance in the background.
The draggable objects are given the snap: 'td' tag so then when you click and drag an element from the floating library it will line up nicely with the grid.
However, what ends up happening is that element is still part of the "floaters" so that when you move the mouse wheel it will still move with all of the other elements still in the unused grouping.
I tried using appendto and that will move the element out of the floaters group and to a different div, but it doesn't maintain the snap position.
Any help would be great! I'm quite new to JS and jquery so even if something seems really simple please try to be thorough in the explanation, thanks a bunch!
EDIT(3) ADDED JSBIN JSBIN Example This gives an idea, I want to be able to click and drag out of the scrolling list and to have it no longer move with that div anymore.
EDIT:ADDED CODE Here is my current code, I tried messing around with sortable and droppable and didn't have a lot of success so that stuff has been removed.
$(function() {
var myelements = {};
var tempstring = "";
$("#snaptarget > [id*='drag']").each(function(index) {
myelements[this.id] = [0,0];
});
$("#snaptarget > [id*='drag']").draggable({
snap: 'td',
snapMode: 'inner',
snapTolerance: 35,
zIndex: 500,
opacity: 0.5,
helper: 'original',
stop: function(e,ui){
tempstring = "";
myelements[this.id] = [ui.offset.top,ui.offset.left];
$.each(myelements, function(key,value){
tempstring += key + ":" + value + ";";
});
$(this).draggable('option','zIndex', 500);
$(this).removeClass('ui-state-highlight');
document.data.objlocations.value = tempstring;
},
start: function(e,ui){
$(this).addClass('ui-state-highlight');
$(this).draggable('option', 'zIndex', 501);
}
});
});
$(window).scroll(function(){
$("#floater").animate({top:$(window).scrollTop()+"px"},{queue:false,duration:350});
});
EDIT(2) HTML of Page in question I cut out a bunch of blank table rows, there are 40 in total.
<html>
<head>
<link type="text/css" href="css/ui-darkness/jquery-ui-1.8rc3.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.8rc3.custom.min.js"></script>
<script type="text/javascript" src="draggable.js"></script>
<script type="text/javascript" src="jquery.tooltip.min.js"></script>
<style type="text/css">
div#floater { position: absolute; top: 10px;}
table { empty-cells:show;border-width: 0px;border-style: solid;}
td {border-width: 1px;border-style: solid;padding:20px 26px 20px 26px;}
</style>
</head>
<body>
<div id='finaltargets'></div>
<div id='floater'>
<form action='/genxml' method='post' name='data'>
<input name='objlocations' type='hidden' value='' />
<input type='submit' value='Generate' />
</form>
<div class='ui-widget-header' id='snaptarget'>
<p>Available Headers:</p>
<div id="27.0_draggable" class="draggable ui-widget-content" title="27.0"><p>27.0</p></div><div id="16.0_draggable" class="draggable ui-widget-content" title="16.0"><p>16.0</p></div><div id="5.0_draggable" class="draggable ui-widget-content" title="5.0"><p>5.0</p></div><div id="33.0_draggable" class="draggable ui-widget-content" title="33.0"><p>33.0</p></div><div id="22.0_draggable" class="draggable ui-widget-content" title="22.0"><p>22.0</p></div><div id="11.0_draggable" class="draggable ui-widget-content" title="11.0"><p>11.0</p></div><div id="28.0_draggable" class="draggable ui-widget-content" title="28.0"><p>28.0</p></div><div id="17.0_draggable" class="draggable ui-widget-content" title="17.0"><p>17.0</p></div><div id="this is a fairly long header to check_draggable" class="draggable ui-widget-content" title="this is a fairly long header to check"><p>this is a fairly long header to...</p></div><div id="34.0_draggable" class="draggable ui-widget-content" title="34.0"><p>34.0</p></div><div id="23.0_draggable" class="draggable ui-widget-content" title="23.0"><p>23.0</p></div><div id="12.0_draggable" class="draggable ui-widget-content" title="12.0"><p>12.0</p></div><div id="1.0_draggable" class="draggable ui-widget-content" title="1.0"><p>1.0</p></div><div id="29.0_draggable" class="draggable ui-widget-content" title="29.0"><p>29.0</p></div><div id="18.0_draggable" class="draggable ui-widget-content" title="18.0"><p>18.0</p></div><div id="blalkjasdf;kljasdhf;hasdf hasdfjkhasldfkah fkjsdh fafhk asfh askdjfh asdjkfh asdkfhas djkfh askdjfh aksjfhkasfh k_draggable" class="draggable ui-widget-content" title="blalkjasdf;kljasdhf;hasdf hasdfjkhasldfkah fkjsdh fafhk asfh askdjfh asdjkfh asdkfhas djkfh askdjfh aksjfhkasfh k"><p>blalkjasdf;kljasdhf;hasdf hasd...</p></div><div id="24.0_draggable" class="draggable ui-widget-content" title="24.0"><p>24.0</p></div><div id="13.0_draggable" class="draggable ui-widget-content" title="13.0"><p>13.0</p></div><div id="2.0_draggable" class="draggable ui-widget-content" title="2.0"><p>2.0</p></div><div id="30.0_draggable" class="draggable ui-widget-content" title="30.0"><p>30.0</p></div><div id="19.0_draggable" class="draggable ui-widget-content" title="19.0"><p>19.0</p></div><div id="8.0_draggable" class="draggable ui-widget-content" title="8.0"><p>8.0</p></div><div id="25.0_draggable" class="draggable ui-widget-content" title="25.0"><p>25.0</p></div><div id="14.0_draggable" class="draggable ui-widget-content" title="14.0"><p>14.0</p></div><div id="3.0_draggable" class="draggable ui-widget-content" title="3.0"><p>3.0</p></div><div id="31.0_draggable" class="draggable ui-widget-content" title="31.0"><p>31.0</p></div><div id="20.0_draggable" class="draggable ui-widget-content" title="20.0"><p>20.0</p></div><div id="9.0_draggable" class="draggable ui-widget-content" title="9.0"><p>9.0</p></div><div id="this is a really really long header_draggable" class="draggable ui-widget-content" title="this is a really really long header"><p>this is a really really long he...</p></div><div id="15.0_draggable" class="draggable ui-widget-content" title="15.0"><p>15.0</p></div><div id="4.0_draggable" class="draggable ui-widget-content" title="4.0"><p>4.0</p></div><div id="32.0_draggable" class="draggable ui-widget-content" title="32.0"><p>32.0</p></div><div id="21.0_draggable" class="draggable ui-widget-content" title="21.0"><p>21.0</p></div><div id="10.0_draggable" class="draggable ui-widget-content" title="10.0"><p>10.0</p></div>
</div>
</div>
<br />
<br />
<div class='ui-widget-header' id='validvalues'>
<p>Used Headers:</p>
<table id='subsortable'>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>