拖放操作中显示的可拖放项不显示hoverClass [英] Droppable items not displaying hoverClass if they are shown during drag operation

问题描述

我的页面上有一些可放置（jQueryUI）的元素，而hoverClass显示了当他们被拖了但是，我有一些隐藏的元素，有时在拖动期间显示，然后不要用他们的hoverClass应答。

我有一个jsFiddle 这里 显示了这种情况，但是，如果继续拖动div，最终将listItems开始显示他们的hoverClass。然而，在我的网站上，这从来没有发生过... hoverClass从不出现在新显示的项目上。

HTML

 < UL> 
< li> Row1< / li> 
< li> Row2< / li> 
< li> Row3< span id =More> MORE ...< / span>< / li> 
< li style =display：none;> Row4< / li> 
< li style =display：none;> Row5< / li> 
< / ul> 
< div id =DragMe> DragMe！< / div> 
  

CSS

  #DragMe {
 position：absolute; 
 height：100px; 
 width：100px; 
 border：1px solid black; 
 background-color：RGBA（255,255,255,0.5）; 
} 
 .DragOver {
 background-color：＃000000; 
颜色：#FFFFFF; 
} 
 #More {
 margin-left：10px; 
} 
  

JavaScript

  $（'＃DragMe'）。draggable（{
 cursorAt：{top：50，left：50} 
}）; 
 
 $（'li'）。droppable（{
 hoverClass：'DragOver'
}）; 
 
 $（'＃More'）。droppable（{
 over：function（）{
 $（'li'）。show（）; 
} 
}）; 
  

有没有什么可以改变以使其正常工作？

解决方案

我猜jQuery UI有一个bug，隐藏的元素是droppables。解决方法可能是使用不透明度：

HTML

 。 .. 
< li class =hidden> Row4< / li> 
< li class =hidden> Row5< / li> 
 ... 
  

CSS

  .hidden {
 opacity：0; 
} 
  

JS

  $（'＃More'）。droppable（{
 over：function（）{
 $（'li.hidden'）。removeClass（'hidden'）; 
} 
}）; 
  

演示： http://jsfiddle.net/CsXpL/2/

编辑

$ b $你欠我一杯冰冷的啤酒！ Draggable有以下选项： refreshPositionsType 说：

如果设置为true，是在每个mousemove计算。注意：这解决了高度动态页面上的问题，但是性能大幅降低。。

链接： http://api.jqueryui.com/draggable/#option-refreshPositions

所以解决方案是：

  $（'＃DragMe'）。draggable（{
 cursorAt：{top：50，left： 50}，
 refreshPositions：true 
}）; 
  

演示： http://jsfiddle.net/CsXpL/9/

I know the title is confusing, but the problem is easily reproduced.

I have some elements on my page that are droppable (jQueryUI), and the hoverClass shows when they are being dragged over. However, I have some hidden elements that are sometimes shown during the drag, and then do not respond with their hoverClass as they should.

I have a jsFiddle here that shows this happening, however, if you continue to drag the div around eventually the listItems start to show their hoverClass. However, on my site this never happens ... the hoverClass never appears on the newly shown items.

HTML

<ul>
    <li>Row1</li>
    <li>Row2</li>
    <li>Row3<span id="More">MORE...</span></li>
    <li style="display: none;">Row4</li>
    <li style="display: none;">Row5</li>
</ul>
<div id="DragMe">DragMe!</div>

CSS

#DragMe {
    position: absolute;
    height: 100px;
    width: 100px;
    border: 1px solid black;
    background-color: RGBA(255,255,255,0.5);
}
.DragOver {
    background-color: #000000;
    color: #FFFFFF;
}
#More {
    margin-left: 10px;
}

JavaScript

$('#DragMe').draggable({
    cursorAt: {top: 50, left: 50}
});

$('li').droppable({
    hoverClass: 'DragOver'
});

$('#More').droppable({
    over: function() {
        $('li').show();
    }
});

Is there something I can change to get this working correctly?

解决方案

I guess jQuery UI has a bug working with hidden elements that are droppables. A workaround could be to work with opacity:

HTML

...
<li class="hidden">Row4</li>
<li class="hidden">Row5</li>
...

CSS

.hidden{
    opacity: 0;
}

JS

$('#More').droppable({
    over: function() {
        $('li.hidden').removeClass('hidden');
    }
});

DEMO: http://jsfiddle.net/CsXpL/2/

EDIT

You owe me an ice cold beer! Draggable has following option: refreshPositionsType saying:

If set to true, all droppable positions are calculated on every mousemove. Caution: This solves issues on highly dynamic pages, but dramatically decreases performance..

Link: http://api.jqueryui.com/draggable/#option-refreshPositions

So solution is:

$('#DragMe').draggable({
    cursorAt: {top: 50, left: 50},
    refreshPositions: true
});

DEMO: http://jsfiddle.net/CsXpL/9/

这篇关于拖放操作中显示的可拖放项不显示hoverClass的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！