日期:2014-05-16  浏览次数:20371 次

跨iframe拖动
需求:index页面中有个垃圾箱图标,index中同时有个iframe(该iframe是显示数据页面),我想把iframe中数据拖到index页面中的垃圾箱的话,那么删除该数据,开始我使用jquery sortable在index中定义结果没反应,
$(window.frames['maincontent'].document).find("#yqtable").sortable({
items:'tr',//定义被拖动的对象
        connectWith: ".delete",//容器外联
        cancel: ".cacel",//标有该样式的将无法被拖动
        cursor: 'move',    //鼠标样式
        opacity: 0.8,    //拖拽时透明
        revert:true,
        out:sortableUpdate//拖拽状态
    }).disableSelection();
求例子,求大神
------解决方案--------------------
好霸气的需求。

如果非要跨iframe拖动,那么非HTML5中的drag and drop API(以下简称dnd API)莫属了。dnd API不仅可以跨iframe,甚至是跨window,跨Client App的,因为这个拖拽API是system level的。这个拖拽和普通的mousedown + mousemove + mouseup模拟的不同,dnd API可以处理好比你从一个文件夹拖拽一个文件到另一个文件夹的这种事件。缺点是HTML5的浏览器才支持。

在iframe内部的item上绑定dragstart事件,在事件的data域中放入需要的数据比如item的序号。在index页面的垃圾箱上监听dragenter和dragover事件,在ondrop事件中取出数据,通知iframe页面进行删除处理。

这里是demo
可以看到,这里拖拽产生的跟随图像,可以超出浏览器范围,因此跨iframe交互是完全可行的,这是普通的mouse事件模拟不能完成的。