一个刚完成的layout（拖动流畅，不受iframe影响）

实现一个拖动流畅、不受iframe影响的layout，可以采用以下方法：

Step 1：在页面中添加待拖拽元素

首先，需要在页面中添加待拖拽的元素，可以使用HTML的 <div> 元素来作为待拖拽元素的容器。在待拖拽元素中，需要使用CSS样式设置元素的 position 为 absolute 或者 fixed，并设置元素的 left 和 top 属性值，以确定元素的初始位置。

示例代码：

<div id="drag-element" style="position: absolute; left: 0px; top: 0px;">
  <!-- 待拖拽元素的内容 -->
</div>

Step 2：将待拖拽元素绑定拖拽事件

为了实现拖拽效果，需要将待拖拽元素绑定拖拽事件。可以使用 mousedown、mousemove 和 mouseup 事件来实现元素的拖拽。当鼠标按下时，记录当前鼠标位置、待拖拽元素的位置等信息；当鼠标移动时，根据鼠标移动的距离计算待拖拽元素的新位置；当鼠标松开时，取消绑定的事件，完成元素的拖拽过程。

示例代码：

var dragElement = document.getElementById('drag-element');
var isDragging = false;
var startX, startY, initialX, initialY;

dragElement.addEventListener('mousedown', function(e) {
  startX = e.clientX;
  startY = e.clientY;
  initialX = dragElement.offsetLeft;
  initialY = dragElement.offsetTop;
  isDragging = true;
});

dragElement.addEventListener('mousemove', function(e) {
  if (isDragging) {
    var dx = e.clientX - startX;
    var dy = e.clientY - startY;
    dragElement.style.left = (initialX + dx) + 'px';
    dragElement.style.top = (initialY + dy) + 'px';
  }
});

dragElement.addEventListener('mouseup', function() {
  isDragging = false;
});

Step 3：解决iframe影响

如果页面中嵌入了iframe，那么如果不做处理，有可能会导致拖拽效果受到影响。解决方法是，在iframe中添加一个空白的透明层，来拦截鼠标事件，并进行传递。

示例代码：

<iframe id="my-iframe" src="http://example.com"></iframe>
<div id="drag-overlay"></div>

#my-iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

#drag-overlay {
  display: none;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 9999;
}

body.dragging #drag-overlay {
  display: block;
}

var dragOverlay = document.getElementById('drag-overlay');
var isDraggingOverIframe = false;

dragOverlay.addEventListener('mouseenter', function() {
  isDraggingOverIframe = true;
});

dragOverlay.addEventListener('mouseleave', function() {
  isDraggingOverIframe = false;
});

document.body.addEventListener('mousemove', function() {
  if (isDragging) {
    document.body.classList.add('dragging');
  } else if (!isDragging && !isDraggingOverIframe) {
    document.body.classList.remove('dragging');
  }
});

以上三个步骤即可实现一个拖动流畅、不受iframe影响的layout。需要注意的是，在实际应用中，还需要根据具体的需求进行调整和优化。