Html 使用YUI3复制元素和子样式

所以我一直在从这个YUI 3拖放教程中学习，而且效果很好

我遇到的一个问题是示例代码只复制了一些CSS样式（单独）。这也不包括可能存在的任何子元素的样式

Y.DD.DDM.on('drag:start', function(e) {
  var drag = e.target;

  drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));

  drag.get('dragNode').setStyles({
    opacity: '.5',
    borderColor: drag.get('node').getStyle('borderColor'),
    backgroundColor: drag.get('node').getStyle('backgroundColor')
  });
});

因此，当拖动开始时，我们创建一个

dragNode

，并根据拖动的项目设置其HTML。设置

dragNode

HTML之后，我们使用

.setStyles（）

设置样式，它似乎接受一个对象

有没有更有效的方法来创建这个

dragNode

，这样它不仅可以获得正确的HTML，还可以获得元素及其子元素的所有样式

---

我知道我可以使用

.one（）

或

.all（）

来访问子元素并手动复制设置的每个样式，但我觉得必须有一种方法可以做到这一点，而无需手动复制所有样式。

您可以考虑使用DOM方法克隆整个内容，这也应该适用于任何应用的样式。此方法（可能还有HTML的现有副本）的一个警告是ID将被复制。在填充拖动节点的情况下，这可能是正常的，因为您不能与拖动节点进行太多交互

---

除了谷歌搜索之外，我还没有研究过的另一种可能性是创建一个要拖动的图像。不过，我不知道这种方法是否足够有效或准确

我最终发现缺少一个顶级类（将样式应用于其子元素）

在我的例子中，修复异常简单，因为我只需要根据元素是否有特定类添加一个类

Y.DD.DDM.on('drag:start', function(e) {
  var drag = e.target;

  drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));

  if( drag.get('node').hasClass('policy') ) {
    drag.get('dragNode').addClass('policy');
  } else {
    drag.get('dragNode').addClass('lead');
  }

  drag.get('dragNode').setStyles({
    opacity: '.5',
    borderColor: drag.get('node').getStyle('borderColor'),
    backgroundColor: drag.get('node').getStyle('backgroundColor')
  });
});

---

最后我确实尝试了一下，遇到了一些奇怪的问题。在设置YUI3后查看DOM之后，我认为我看到的问题可能来自重复的ID。我将接受这一点作为答案，就像您回答实际问题一样。在我在YUI3库中使用拖放的情况下，它不起作用，但是这比你的回答能力更缺乏我的技能。哈哈。实际上，通过相同的教程工作，有完全相同的想法-你可以

setStyle

和

setStyle

，但只有

getStyle

，由于某种原因，没有

getStyles

。