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

Question

我在以下脚本中有两列https://jsfiddle.net/3csdfo97/12/

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);
}

右栏是iframe。

我想从左列拖动元素并将其放在右列中。

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

有什么想法吗？

非常感谢你的帮助。