当我在我正在使用的图像中拖动元素时遇到闪烁问题时,我正在为一个项目工作快速笔.不确定这里发生了什么,当你最初加载笔并第一次将它翻过来时似乎没有出现这个问题,但之后就开始了.
片段演示:
$(document).bind('mousemove', function(e){
$('.tagger').css({
left: e.pageX - 55,
top: e.pageY - 55
});
});
$('#crowd').hover(function(){
$('.tagger').show();
});
$('#crowd').mouseleave(function(){
$('.tagging').attr('class', 'tagger');
$('.tagger').hide();
});
$('#crowd').click(function(){
$('.tagging').attr('class', 'tagger');
});
$('.tagger').click(function(){
$('.tagger').attr('class', 'tagging');
});
$(document).on('click', '.tagging li', function(){
alert($(event.target).text());
});Run Code Online (Sandbox Code Playgroud)
.tagger {
top: 0px;
left: 0px;
position: absolute;
z-index: 3;
}
.tagger .frame {
position: relative;
height: 100px;
width: 100px;
padding: 0px;
border: 5px;
border-style: solid;
border-color: red;
}
.tagger .name {
display: none;
position: relative;
top: -5px;
height: 90px;
width: 90px; …Run Code Online (Sandbox Code Playgroud)完成一个照片标记练习小部件,我剩下的只是一个问题,即无法选择关闭以前制作的标签的“x”框。我确保关闭它们的代码已经工作,但由于我如何使用跟随光标的分层 div,我可能从未真正点击过它。我已经确定它也有更高的 z-index 值,但这似乎仍然不会影响这个问题。
编辑:刚刚发现另一个小问题,每当标记框变成绿色标记框时,它就会下降大约 5 个像素。是否可以简单地偏移 CSS 高度,或者您是否必须为其提供所有新参数?
$(document).bind('mousemove', function(e){
$('.tagger').css({
left: e.pageX - 55,
top: e.pageY - 55
});
});
$('#crowd').click(function(){
$('.tagging').attr('class', 'tagger');
});
$('#crowd').mouseleave(function(){
$('.tagging').attr('class', 'tagger');
});
$(document).on('click', '.tagger', function(e){
$('.tagger').attr('class', 'tagging');
});
$(document).on('click', '.tagging li', function(e){
$('.tagging .name').text($(event.target).text());
$('.tagging .xBox').removeClass('hidden');
$('.tagging').attr('class', 'tagged');
$( ".container" ).append("<div class='tagger'><div class='xBox hidden'>x</div><div class='frame'></div><div class='name'><ul><li>One</li><li>Two</li><li>Three</li><li>Fork</li><li>Fyve</li></ul></div></div>");
});
$(document).on('click', '.xBox', function(e){
$(e.target).parent().remove();
});Run Code Online (Sandbox Code Playgroud)
.tagger {
top: 0px;
left: 0px;
position: absolute;
z-index: 3;
}
.tagger .frame {
position: relative;
height: 100px;
width: …Run Code Online (Sandbox Code Playgroud)