After referencing this discussion, I successfully managed to drag items from one scroll overflow to another. However, the issue arises when these items (or their clones) are in the other scroll overflow as they do not respond to .mouseover(). The goal is to enable users to delete the items in the second scroll overflow by clicking on them if they decide they no longer want those items. Any assistance with the code provided below would be greatly appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.0");
google.load("jqueryui", "1.7.2");
google.setOnLoadCallback(OnLoad);
function OnLoad(){
var dropped = false;
$(".tag_cell").draggable({
addClasses: false,
revert: 'invalid',
containment: '#tagFun_div_main',
helper: 'clone',
appendTo: '#tagFun_div_helper',
start: function(event, ui) {
dropped = false;
$(this).addClass("hide");
},
stop: function(event, ui) {
if (dropped==true) {
$(this).remove();
console.log($(this));
} else {
$(this).removeClass("hide");
}
}
});
$(".scrollbox").droppable({
accept: '.tag_cell',
hoverClass: 'tf_dropBox_hover',
activeClass: 'tf_dropBox_active',
drop: function(event, ui) {
dropped = true;
$.ui.ddmanager.current.cancelHelperRemoval = true;
ui.helper.appendTo(this);
ui.helper.attr("class","storeditem");
ui.helper.attr("style","top:0px;left:0px;");
}
});
$(".storeditem").mouseover(function(){
$(this).attr("class","storeditem deleteable");
});
$(".storeditem").mouseout(function(){
$(this).removeClass("deleteable");
});
$(".tag_cell").mouseover(function(){
$(this).attr("class","tag_cell deleteable");
});
$(".tag_cell").mouseout(function(){
$(this).removeClass("deleteable");
});
}
</script>
<style>
div#tagFun_div_main { display:block; width:800px; height:400px; margin:auto; padding:10px; background:#F00; }
div#tf_div_tagsReturn { display:block; width:200px; height:100%; float:left; overflow:auto; background:#000; }
div#tf_div_tagsDrop { display:block; width:200px; height:100%; float:right; }
div#tf_dropBox { display:block; width:100%; height:250px;}
li.tag_cell { display:block; width:25px; height:25px; margin:1px; float:left; cursor:pointer; background:#0FF; z-index:99; }
li.tag_cell.hide { display:none; }
ul.scrollbox { position: relative; width: 50px; height: 70px; overflow-x: hidden;
overflow-y: scroll; margin-right: auto; margin-left: auto; background-color: #4C5EB6;
}
.scrollbox li{ position: relative; margin: 1px; background-color: #fff; z-index: 2;
background:#0FF; color:#fff; width: 20px; height: 20px; margin-left: auto;
margin-right: auto; list-style: none;
}
.scrollbox.tf_dropBox_hover { background:#FFF !important; }
.scrollbox.tf_dropBox_active { background:#333; }
.deleteable{ background-color: #2EB354 !important }
</style>
</head>
<body>
...
</body>
</html>