拖放鬼影不能超过290像素

Question

下面的代码适用并允许拖动但是＆＃34; ghost＆＃34;当#blue的宽度约为280px或290px或更小时，图像看起来只是透明的：

当它像400px或700px这样的东西而不是变得有点透明时，会得到一些渐变不透明度，如下所示：

＆＃13;

＆＃13;

var source;

var fake = document.getElementById('fake');

function isbefore(a, b) {
    if (a.parentNode == b.parentNode) {
        for (var cur = a; cur; cur = cur.previousSibling) {
            if (cur === b) { 
                return true;
            }
        }
    }
    return false;
} 

function dragenter(e) {


    if (isbefore(fake, e.target)) {
        e.target.parentNode.insertBefore(fake, e.target);
    }
    else {
        e.target.parentNode.insertBefore(fake, e.target.nextSibling);
    }
}

function dragstart(e) {

    var crt = document.getElementById('ghost');
     
    source = e.target;
	
    e.dataTransfer.setData('text', 'anything');  

    e.dataTransfer.effectAllowed = 'move';

    e.dataTransfer.setDragImage(crt , 0, 0);
}

＆＃13;

[draggable] 
{
    user-select: none;
}
body 
{
    background-color: #fff; 
    color: #303; 
    font-family: sans-serif; 
    text-align: center;
}
li 
{
    list-style-type: none;
    margin: 2px;
    padding: 5px;
    background-color: red;
    width: 800px;    
}
ul 
{
    margin: auto;
    text-align: center;
    width: 25%;
}
#fake
{
    border: 2px dotted black;
    background-color: white;
}
#ghost
{
    background-color:blue;
    width: 380px;
}

＆＃13;

<ul>
    <li draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)">Apples</li>
    <li draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)">Oranges</li>
    <li draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)">Bananas</li>
    <li draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)">Strawberries</li>
    <li id="fake">&nbsp;</li>
    <li id="ghost">GHOST</li>       
</ul>

＆＃13;

＆＃13;

＆＃13;

如何制作＆＃34;幽灵＆＃34;元素是不透明的还是正常的，而不是渐变透明度？