Question

所以我从这个YUI 3 Drag n'Drop教程中蚕食了this code，它一直很好用。

我遇到的一个问题是示例代码只复制了一些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()来获取子元素并手动复制每个设置的样式，但我觉得必须有一种方法可以做到这一点而不是全部手动样式复制。

Answer 1

您可以使用DOM cloneNode(true)方法来克隆整个事物，这也应该拉过任何应用的样式。使用此方法的一个警告（可能是现有的HTML副本）是ID将被复制。在填充Drag Node的情况下可能没问题，你无法与之交互。

除了谷歌搜索之外我还没有调查的另一种可能性是使用html2canvas来创建要拖动的图像。我不知道这种方法是否足够高效或准确。

Answer 2

我最终发现的是我错过了一个顶级课程（将样式应用于其子元素）。

在我的情况下，修复程序非常简单，因为我必须根据元素是否具有特定类来添加单个类。

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复制元素和儿童样式

2 个答案: