Javascript 阻力+；滴

我有一些类似于附加代码的东西，其中一些绿色div可以在列表元素之间拖放

有两个问题我似乎无法解决：

1） 较大的“Take Me”div中的“ghost”拖动图像几乎不可见。用户几乎不知道拖动了什么。这能改变吗

2） 放置目标是鼠标指针下的目标。这是非常合乎逻辑的，但它使用户很难理解绿色将被放置在何处。如果它被底部拖拽，那么当松开鼠标按钮时，绿色会向下跳一大步。有没有办法使重影图像的顶部捕捉到指针

在最终的应用程序中，将有许多绿色div，用户应该能够在没有重叠的情况下将它们放在一起，因此清楚地了解拖动的内容和精确的拖放非常重要

我最好不要使用drag事件，而是以老式的方式手动实现dragdrop（很可能是使用某种库）

我只需要支持最新的浏览器，到目前为止，我只在Windows上尝试了Chrome和FF

函数initDragDrop（）{
initDragDrop.draugd=null；
//拖
$（“div”）
.on（'dragstart'，
功能（事件）{
initDragDrop.draugd=此；
initDragDrop.draugd.style.opacity=0.5；
event.originalEvent.dataTransfer.setData（'text/plain'，'dummy'）；
})
.on（'dragend'，函数（事件）{
event.target.style.opacity=''；
});
//降低目标
$（‘li’）
.on（'dragenter'，功能（事件）{
event.preventDefault（）；
})
.on（'drop dragdrop'，函数（事件）{
event.preventDefault（）；
event.stopPropagation（）；
event.target.classList.remove（'dragover'）；
如果（initDragDrop.draugd）{
initDragDrop.Drawed.style.opacity=''；
$（this.append（$（initDragDrop.draugd））；
initDragDrop.draugd=null；
}
})
.on（'dragover'，功能（事件）{
event.target.classList.add（'dragover'）；
event.preventDefault（）；
})
.on（'dragleave'，函数（事件）{
event.target.classList.remove（'dragover'）；
});
}
initDragDrop（）
ul{
宽度：30em；
显示：块；
}
小型{
边缘顶端：4em；
宽度：10em；
}
李{
高度：2米；
边框：1px纯灰；
}
李德拉戈弗{
背景：ddd；
}
div{
背景颜色：浅绿色；
边框：2倍实心暗绿色；
位置：相对位置；
保证金：0；
宽度：90%；
身高：5公分；
}





带我去







也带我去




不能直接为拖动的元素设置样式。
一旦开始拖动，它就是此时元素外观的位图副本

但是，您可以在开始拖动之前更改其样式（或类），然后立即将其恢复。
因此，我们应该能够在“截图”出现之前将其样式化，使其处于良好的位置

这里是一个尝试，其中的样式工作，但不是定位…我试图找出它：


（函数initDragDrop（）{
initDragDrop.draugd=null；
//拖
$（“div”）
.on（'dragstart'，函数（事件）{
initDragDrop.draugd=此；
initDragDrop.draugd.classList.add（'ghost'）；
event.originalEvent.dataTransfer.setData（'text/plain'，'dummy'）；
//在拖动图元之前设置其样式
var elm=event.target；
elm.classList.add（'dradded'）；
elm.style.top=（event.clientY）-5+'px'；
elm.style.left=（event.clientX）-5+'px'；
//开始拖动后重置样式
setTimeout（（函数（elm）{
返回函数（）{
elm.classList.remove（'dradded'）；
elm.style.removeProperty（'top'）；
elm.style.removeProperty（'left'）；
}
})（elm），1000）；
})
.on（'dragend'，函数（事件）{
//event.target.style.opacity=''；//未使用
});
//降低目标
$（‘li’）
.on（'dragenter'，功能（事件）{
event.preventDefault（）；
})
.on（'drop dragdrop'，函数（事件）{
event.preventDefault（）；
event.stopPropagation（）；
event.target.classList.remove（'dragover'）；
if（initDragDrop.draugd）{
initDragDrop.draugd.classList.remove（'ghost'）；
$（this.append（$（initDragDrop.draugd））；
initDragDrop.draugd=null；
}
})
.on（'dragover'，功能（事件）{
event.target.classList.add（'dragover'）；
event.preventDefault（）；
})
.on（'dragleave'，函数（事件）{
event.target.classList.remove（'dragover'）；
});
})();
ul{
宽度：30em；
显示：块；
}
小型{
边缘顶端：4em；
宽度：10em；
}
李{
高度：2米；
边框：1px纯灰；
}
李德拉戈弗{
背景：ddd；
}
div{
背景颜色：浅绿色；
边框：2倍实心暗绿色；
位置：相对位置；
保证金：0；
宽度：90%；
身高：5公分；
}
.鬼魂{
不透明度：0.5；
}
.拖{
显示：块；
位置：固定；
背景色：红色；
}





带我去







也带我去




谢谢！我曾经尝试过类似的方法（之后没有“取消样式”，这很聪明），但仍然不理想。考虑到我的另一个问题，看起来我不得不求助于不使用拖动事件。嘿@FrancescoNardone，我已经使用用于拖动和重影元素的类增强了我的代码片段。我还增加了职位管理，但是