所以使用 this as a starting point我正在尝试将元素从一个滚动溢出拖到另一个滚动溢出，我已经完成了。问题是一旦元素(或者更确切地说是元素的克隆)在另一个滚动溢出中，它们就不会响应 .mouseover()。这个想法是让第二个滚动溢出中的元素在您决定不想要它们时可以通过单击鼠标来删除。我在下面使用的代码，感谢任何帮助。
<!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>
<div id="tagFun_div_main">
Drag to blue box
<ul id="tf_div_tagsReturn">
<li class="tag_cell"></li>
<li class="tag_cell"></li>
<li class="tag_cell"></li>
<li class="tag_cell"></li>
<li class="tag_cell"></li>
<li class="tag_cell"></li>
<li class="tag_cell"></li>
<li class="tag_cell"></li>
<li class="tag_cell"></li>
<li class="tag_cell"></li>
<li class="tag_cell"></li>
</ul>
<div id="tf_div_tagsDrop">
<div id="tf_dropBox">
<ul class="scrollbox">
</ul>
</div>
</div>
</div>
<div id="tagFun_div_helper">
<!-- this is where the helper gets appended for temporary use -->
</div>
</body>
</html>
最佳答案
当使用 helper='clone' 时，您的元素事件不会随元素一起复制(在您的情况下，您的 mouseover 事件负责添加 deleteable CSS 类)。
我可以建议您在可拖动的初始化中替换这一行:
helper: 'clone',
通过:
helper: function() {
// true to keep data and events
return $(this).clone(true);
},
看看 jQuery .clone()更多信息的函数文档
我设置了这个 jsFiddle 来说明这个解决方案
关于javascript - .mouseover 在放下元素后停止工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23814661/