无法在javascript中将元素拖放到iframe

我在下面的脚本中有两列

右列是一个iframe

我想从左列拖动元素，然后将它们放到右列

我有两个问题。只要我在左列中选择一个元素，它就会移动到右列。第二点是，当有滚动时，我无法在iframe的底部放置元素

有什么想法吗

---

非常感谢你的帮助

奇怪的是，你为什么要首先使用iframe呢？这个应用程序是一个电子邮件生成器。它用于生成电子邮件。我需要的显示不受应用程序CSS的影响。

var myLayout = $('body').layout({
  default: {
    applyDefaultStyles: true,
    spacing_open: 0,
    spacing_closed: 0
  },
  north: {
    applyDefaultStyles: true,
    spacing_open: 0,
    spacing_closed: 0,
    showOverflowOnHover: true
  },
  west: {
    slidable: false, 
    applyDefaultStyles: true
  }
});
    myLayout.sizePane("west", 260);
    myLayout.sizePane("north", 50);
    $('body > div').css('border', '0 solid white');

function initDraggable() {
  $("ul#blockTypes li").draggable({
    iframeFix: true,
    iframeOffset: $('iframe#preview').offset(),
cursor: 'move',
helper: function (evt, ui) {
  return $(this).clone().appendTo('body').css('zIndex',5).show();
},
connectToSortable: $('iframe#preview').contents().find('#ossBlocks'),
cursorAt:{top:0,left:0}
  });
}
 initDraggable();
    $('iframe#preview').contents().find("#ossBlocks").droppable({
 drop: function(e, ui) {
//alert("nono");
}
});
$('iframe#preview').contents().find('#ossBlocks').sortable({
    iframeFix: true,
  cursorAt:{top:0,left:0} 
});
//$("ul#blockTypes li").on('dragstop',autoResize);

function autoResize(){
    var newheight;
    if(document.getElementById){
        newheight=document.getElementById('preview').contentWindow.document .body.scrollHeight;
    }
    newheight=newheight+100;
    $('#preview').css('height',newheight);
}