Javascript 如何设置拖动元素的样式

我可以使用一些事件来处理拖放：

有一个

drag

事件，该事件在拖动元素时触发。我可以控制源元素样式或目标可拖放容器，但如何设置浏览器创建的“ghost”元素的样式

当元素位于不可拖动的区域上时，我想从中删除“禁用”图标，并将其替换为“光标移动”图标

以下是我目前掌握的情况：

---

不太确定其他浏览器，但是

数据传输

对象包含一个名为

mozCursor

的属性。这允许您在拖动状态下更改光标，但这是Mozilla属性

可以在以下位置找到使用此选项的示例，在

dragstart

（设置为使用默认的“箭头”光标）、

dragover

（设置为使用自动拖动光标（带副本的箭头））和

dragleave

（重置为使用默认的“箭头”光标）上更改设置：

---

请尝试以下答案：

---

使用以下内容更新您的dragover：

$('#droppable').bind('dragover', function (e) {
  $(this).addClass('over'); // new

  ...

---

基本上，您希望将特定样式应用于新创建的元素，这些元素是#dropable的子元素

#droppable div { here your code }

---

不能直接设置此样式，因为它是拖动开始时元素外观的位图/副本：

编辑：

实际上，可以通过在拖动开始时短暂更改元素的样式来实现此目的：

这在Chrome19中可以完美地工作，并根据您在Firefox13中拖动的方式显示样式的变化。您需要在拖放时重置被拖动元素的样式

---

（请注意，我有一台速度非常快的计算机，所以我不确定这种攻击是否仍能在速度较慢的机器上工作）

另一种方法是，仅使用CSS，将元素的

：active

伪类设置为所需的拖动样式。将基于此状态创建拖动的副本

但是，原始元素将保留此样式，因为浏览器似乎将其保持活动状态，直到删除为止。 为了避免这种情况，我们可以在运行时间很短的动画中指定样式。足以让浏览器复制样式，但不能太短。0.1s对于Chrome、Safari和Firefox来说已经足够了

$（'#draggable'）.bind（'dragstart'，函数（e）{
// http://stackoverflow.com/questions/2419749/get-selected-elements-outer-html
var stuff=$（this.clone（）.wrap（“”）.parent（）.html（）；
e、 originalEvent.dataTransfer.effectAllowed='copy'；
e、 originalEvent.dataTransfer.setData（'stuff'，'stuff'）；
});
$（'#draggable'）.bind（'draggable'，函数（e）{
//在这里，我想风格的鬼元素，而不是源。。。
});
$（'#droppable'）.bind（'dragover'，函数（e）{
如果（例如，originalEvent.preventDefault）
e、 预防默认值（）；
e、 OriginaleEvent.dataTransfer.dropEffect='copy'；
返回false；
});
$（“#可拖放”）.bind（'dragenter'，函数（e）{
$（this.addClass（'over'）；
});
$（'#droppable'）.bind（'dragleave'，函数（e）{
$（this.removeClass（'over'）；
});
$（'#droppable'）.bind（'drop'，function（e）{
如果（如原始事件停止传播）
e、 originalEvent.stopPropagation（）；
var stuff=$（e.originalEvent.dataTransfer.getData（'stuff'）；
附在（这个）后面；
返回false；
});
#可拖动，
#可降落{
背景：#ccc；
颜色：#fff；
填充：10px；
利润率：10px 0 100px；
}
#可拖动：活动{
动画：拖拽式。1s；
}
#可降落{
背景：#000；
}
@关键帧拖动样式{
0% {
背景色：#fc0；
颜色：#000；
}
99% {
背景色：#fc0；
颜色：#000；
}
100% {
背景色：#ccc；
}
}

把我拖到我的目标

放下我

谢谢，这修复了我认为的浏览器故障，但并没有解决我的问题：PI不认为您可以为“ghost”元素设置样式。当Firebug在测试时打开时，它似乎没有显示对HTML的任何更改。你有什么想要实现的例子吗？很好，谢谢。。。在使用此解决方案之前，尝试使用setDataImage方法（和其他数据传输方法），结果不一。DnD/数据传输API中似乎存在一些奇怪的行为。
$('#draggable').bind('dragstart', function (e){

  [Set style here]

  setTimeout(function(){
    [Reset style here]
  }, 1);

  ...

});